Live data from Hacker News

Super Tiny Website Logos in SVG

shkspr.mobi

41–50 of 121 posts

Re: Super Tiny Website Logos in SVG

#41
Amazing! With SVG being supported on all browsers you should care about today, it obsoletes icon fonts, which require the entire icon set to be downloaded.

Anyone know of a FontAwesome-like project, ideally with a CDN, that serves SVG icons like Font Awesome has so including them in a website is easy and compact?

Re: Super Tiny Website Logos in SVG

#42

Where do we find a good SVG editor? That might be the reason the mass hasn't switched to svg.

Perhaps Inkscape?

Inkscape is ok. It has serious issues though - pretty terrible performance, confusing UI, still requires X11 on Mac, etc. Probably still the best free SVG editor but I'm not sure I'd go so far as to call it good.

Re: Super Tiny Website Logos in SVG

#43
I bet many of these would be even smaller in SWF, since that's a very efficient (bit-packed, and then compressed) binary format specifically designed for small filesize, as opposed to the textual XML of SVG (although SVG is not really "XML-ish" in the sense that path data is still a list of points, and not one-element-per-point.)

Re: Super Tiny Website Logos in SVG

#44

I bet many of these would be even smaller in SWF, since that's a very efficient (bit-packed, and then compressed) binary format specifically designed for small filesize, as opposed to the textual XML of SVG (although SVG is not really "XML-ish" in the sense that path data is still a list of points, and not one-element-per-point.)

SVG compresses reasonably well, especially if you're inlining it in a page with other SVGs, or using Brotli.

Re: Super Tiny Website Logos in SVG

#45
post #24
post #18

In case anyone else was suspicious of the 20k file size for a 512x512 PNG with essentially two colors - it's way off. I dropped it into Photoshop and exported as PNG and it spit out an identical file that weighs in at 6k.

And if you run it through https://tinypng.com it should get down even smaller. PNG compresses surprisingly well when it’s basically two colors + alpha.

With the caveat that https://tinypng.com uses lossy compression.

Re: Super Tiny Website Logos in SVG

#46
post #14
post #10

Very cool! I would advise to try minifying with svgomg, some icons seem to benefit. Eg bitbucket.svg can be reduced by 20% without any visual change.

Most of them were already minimised with SVGO and svgcleaner. If you can make them smaller - I'd love a pull request :-)

Do you care about readability? Does ungzipped size counts or you assume that users will be using gzip?

Here is DO logo that you can gzip down to 221b

http://www.w3.org/2000/svg" fill="#0080ff">

Do you think it is ok to pull out newlines?

Re: Super Tiny Website Logos in SVG

#47
post #24
post #18

In case anyone else was suspicious of the 20k file size for a 512x512 PNG with essentially two colors - it's way off. I dropped it into Photoshop and exported as PNG and it spit out an identical file that weighs in at 6k.

And if you run it through https://tinypng.com it should get down even smaller. PNG compresses surprisingly well when it’s basically two colors + alpha.

  Photoshop: 6 705 bytes, 128 colors, 1-bit alpha only
  TinyPNG: 6 179 bytes, 92 colors
  Optimage: 5 761 bytes, 154 colors
  TinyPNG + Optimage (lossless): 5 226 bytes, 92 colors
https://imgur.com/a/X9DnJ

TinyPNG tends to use fewer colors. But its compressor is pretty suboptimal. I could reduce the image further by 15.4% with the tool I'm making (http://getoptimage.com).

Re: Super Tiny Website Logos in SVG

#48
post #46
post #14

Earlier quoted context omitted.

Most of them were already minimised with SVGO and svgcleaner. If you can make them smaller - I'd love a pull request :-)

Do you care about readability? Does ungzipped size counts or you assume that users will be using gzip? Here is DO logo that you can gzip down to 221b http://www.w3.org/2000/svg" fill="#0080ff"> Do you think it is ok to pull out newlines?

In the readme, I've said that I want to keep newlines for readability. That helps with people learning about SVG.

I'm not fussed about compressed size - but I'd certainly welcome a Pull Request if you've managed to shrink that icon.

Re: Super Tiny Website Logos in SVG

#49
post #37

Where do we find a good SVG editor? That might be the reason the mass hasn't switched to svg.

Sketch for Mac is excellent

I second that. While it definitely isn't on par with Adobe Illustrator regarding some very advanced features, Sketch is so rediculos easy to understand and beautiful to work with that it is nowadays my go to solution for design and layout work that was previously done with Photoshop, Illustrator and InDesign.

Re: Super Tiny Website Logos in SVG

#50
post #41

Amazing! With SVG being supported on all browsers you should care about today, it obsoletes icon fonts, which require the entire icon set to be downloaded. Anyone know of a FontAwesome-like project, ideally with a CDN, that serves SVG icons like Font Awesome has so including them in a website is easy and compact?

As a designer I always recommend https://feathericons.com/ as an alternative to font awesome. All SVG, all with uniform sizing and a pretty diverse selection - not as diverse as FA, but still. Very pretty and not as widely adopted as FA.
Post reply on HN