pouët.net

pouet svg icons

category: general [glöplog]
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: BB Image -> BB Image
UI arrows: BB Image -> BB Image
added on the 2023-12-18 10:54:02 by kusma kusma
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.
added on the 2023-12-18 10:56:09 by Sesse Sesse
Additionally, here's an attempt to clean up the submit/preview icons, but this time using CSS:
https://codepen.io/kusma/pen/dyjLapd
added on the 2023-12-18 11:22:38 by kusma kusma
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:

BB Image
added on the 2023-12-18 11:30:22 by kusma kusma
Some other icons needing conversion:

Awards:

  • BB Image
  • BB Image
  • BB Image
  • BB Image
  • BB Image
  • BB Image
  • BB Image
  • BB Image
  • BB Image


Bar: BB Image (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 (BB Image) in the info-box at the top, and the old one (BB Image) 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!
added on the 2023-12-18 11:45:15 by kusma kusma
Whoops, seems I did the nanobytes winner twice instead of this one:

BB Image
added on the 2023-12-18 11:46:42 by kusma kusma
Hello Kusma,

Great innitiative.
I agree with your a piggy icon conclusions. Will have a look at the pig and will contact you back!
added on the 2023-12-18 12:59:57 by sim sim
sim: awesome!

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

Not perfect, but kinda works... In general, I think demoparty.net no longer uses a logo, so matching it perfectly is a bit pointless.
added on the 2023-12-18 13:44:07 by kusma kusma
Viewing Tip: BB Image -> BB Image
added on the 2023-12-18 13:59:11 by kusma kusma
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.
added on the 2023-12-18 15:30:49 by Gargaj Gargaj
Really nice initiative Eriik! I can also help if you need
added on the 2023-12-18 19:31:25 by farfar farfar
Quote:
But I also notice that on the prod page, we currently display both the old and new piggy; the new one (BB Image) in the info-box at the top, and the old one (BB Image) when picking the rating.

That was probably a typo, fixed now.
added on the 2023-12-18 20:09:42 by Gargaj Gargaj
Thanks for pointing out the green dot. I added a very trivial CSS version of the green dot to the codepen linked above (BB Image), BTW. As well as a simple version of the bar. The latter doesn't matter much TBH, it currently scales just fine.
added on the 2023-12-18 20:11:19 by kusma kusma
Quote:
UI arrows: BB Image -> BB Image

This will need all 4 directions cos of the gradient being the same direction on them (i.e. i cant just rotate them)
added on the 2023-12-18 21:32:27 by Gargaj Gargaj
there's hope for some avatars though thanks to <animateTransform> :D
BB Image
wut... it rotates in preview but not as actual post? *facepalm* :D
it does after a page refresh... weird :D
Quote:
Quote:
UI arrows: BB Image -> BB Image

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


I'm not sure why not? The gradient is currently rotated with the arrows as well:
BB Image
BB Image
BB Image
BB Image
added on the 2023-12-19 11:22:22 by kusma kusma
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.
added on the 2023-12-19 11:24:12 by kusma kusma
Meh, probably better to just do "filter: brightness(0.75);" in CSS for the current ones...
added on the 2023-12-19 11:32:10 by kusma kusma
Yeah, at this point might as well...
added on the 2023-12-19 11:34:19 by Gargaj Gargaj
great initiative!

btw there is a css setting
Code:image-rendering: pixelated;


https://i.imgur.com/WRVukCK.png
setting this already helps to remove the blurriness..
added on the 2023-12-19 15:49:11 by pandur pandur
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.
added on the 2023-12-19 16:00:34 by Gargaj Gargaj

login