pouët.net

As some of you may know, I've been slowly trying to convert the various icons used here on pouët,net to SVG, so the site renders better on high-dpi screens. So far I've just been emailing Gargaj the icons, and he has implemented the ones he was happy with.

Generally speaking, my goal is to produce replacement SVGs that renders as closely as possible to the original icons at 1x scale, but can be scaled arbitrary while preserving the original design as closely as possible.

But this process is currently moving slowly, and isn't very transparent. So I thought I'd move to doing it as an on-site thread instead. In addition, this could be used as a place to point out icons missing conversion, and for others to help out if they want to.

So far, I've stayed away from three categories:

• Avatars - These are user-submitted, and it just doesn't seem viable to convert them all.
  
• Platform icons - Again, there's a lot of them, and they have some shared elements (like a common-ish frame around them). And, they're all packed into a large PNG sprite-sheet, so they'd probably have to be tackled all in one go..
  
• Production type icons - Same problems as with platform icons, really.
  

However, I've recently-ish started looking at the platform and prod-type icons as well, but taking a bit of a scripting-approach to it, to try to generate an svg sheet from a collection of platform / type icons, and automating / reusing the frames around them. It' still a pretty herculean task, and I suspect I won't be able to complete it without help. In case someone wants to look at the current state of this and perhaps help out, the work can be found here.

Here's some other misc icons that I've converted, and I hope to hear what people think about them:

Bitfellas: ->
UI arrows: ->

I think both of these are clear improvements. Even on a low-dpi screen, they're less blurry.

I also hope that at some point, some of the weird misalignments could be fixed. E.g. by your nick now, there's a green dot that seems weirdly out-of-place vertically.

Additionally, here's an attempt to clean up the submit/preview icons, but this time using CSS:
https://codepen.io/kusma/pen/dyjLapd

Apart from the Bitfellas logo I've converted above, it seems like the only "normal" (e.g not avatar, platform icon or prod-type) left on the front-page is this one:

Some other icons needing conversion:

Awards:

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

Bar: (this one should probably be done with CSS instead of SVG)

I think that's all I'm currently aware of. I'm sure I've missed something.

But I also notice that on the prod page, we currently display both the old and new piggy; the new one () in the info-box at the top, and the old one () when picking the rating. And I'm not super duper happy with the new (the old one was also pretty meh TBH), so if someone can come up with a better version, that'd be awesome!

Whoops, seems I did the nanobytes winner twice instead of this one:

Hello Kusma,

Great innitiative.
I agree with your a piggy icon conclusions. Will have a look at the pig and will contact you back!

sim: awesome!

I also did a conversion of the dpnet icon that I think kinda works:
->

Not perfect, but kinda works... In general, I think demoparty.net no longer uses a logo, so matching it perfectly is a bit pointless.

Viewing Tip: ->

yeah, nice initiative.. especially for peeps like me who browse pouet in 125% zoom (so i can sit like a potato behind my pc)

- The ASM icons could use a bit more love, they were just something I cooked up quickly while waiting for the ASM peeps to come back with a better one.
- The green dot will get replaced/removed.

Really nice initiative Eriik! I can also help if you need

That was probably a typo, fixed now.

Thanks for pointing out the green dot. I added a very trivial CSS version of the green dot to the codepen linked above (), BTW. As well as a simple version of the bar. The latter doesn't matter much TBH, it currently scales just fine.

I meant https://codepen.io/kusma/pen/dyjLapd

This will need all 4 directions cos of the gradient being the same direction on them (i.e. i cant just rotate them)

there's hope for some avatars though thanks to <animateTransform> :D

wut... it rotates in preview but not as actual post? *facepalm* :D

it does after a page refresh... weird :D

I'm not sure why not? The gradient is currently rotated with the arrows as well:

I think the only thing I realize that we need is a bright and dark version (seems I matched the colors for the bright version), for differentiation the current sorting column.

Meh, probably better to just do "filter: brightness(0.75);" in CSS for the current ones...

Yeah, at this point might as well...

great initiative!

btw there is a css setting

https://i.imgur.com/WRVukCK.png
setting this already helps to remove the blurriness..

We already use that for the user profile zoomed in avatar - problem is, it looks really gross on small avatars at non-integer scale ratios.