Hacker News Reader

Comment by edent | Hacker News Reader

If you're interested in minifying SVGs by hand, we're creating SVG icons in under 1KB at https://github.com/edent/SuperTinyIcons/

We could do with some help on the accuracy of some of them :-)

View on HN

Awesome project. So nice to see these logos collected in a place with attention to the underlying SVG detail. None of the garbage comments/ids/etc outputted by Adobe and Sketch.

Awesome! One thing I noticed: your LinkedIn logo has an artifact when rendered small in my browser (Firefox). There is a thin vertical blue line between the downstroke and the round stroke in the 'n'.

The GitLab logo has very prominent gray lines between the segments. I recall reading an article about this issue with alpha blending, but can no longer find it.

I found a related article: https://news.ycombinator.com/item?id=14310652

How do you recommend people send those to the front-end (assuming a web interface)? One request per icon as done in the README is extremely wasteful. Is there a format that allows importing multiple SVG in one request? Embedded at build time? Or as data URL?

Not forgetting compression too as it makes a huge impact on big enough SVG: Firefox goes from 1024 (not 1023?) to 522 bytes, HN goes from 229 to 208.

> One request per icon as done in the README is extremely wasteful.

That depends on the transport, this is one of the things that HTTP/2 (and HTTP/3) aim to fix by downloading them in parallel in a single connection.

Watch the devtools network tab: http://www.http2demo.io/

There is still a header to send. Talking about SVG that are on average 465 bytes, a 867 bytes header (as sent by GitHub[0]) is not negligible. HTTP compresses headers though, so according to [1] we can expect ~30% header transferred size/actual size ratio which brings header transferred size to ~260 bytes. Still a 56% overhead for the average icon from this collection.

[0]: https://camo.githubusercontent.com/d0518022b7a02d405ad5112a0...

[1]: https://blog.cloudflare.com/hpack-the-silent-killer-feature-...

If it's more then couple svgs that repeat on every page and you want to use them as not just backgrounds (in which case I would recommend special .css file with svgs as data-uris), the best way is in my opinion storing them all in one file and then linking them using their id. It's described for instance in https://www.creativebloq.com/features/the-complete-guide-to-...

How do guys even manage to type those path coordinates by hand ? Do you do the calculations for path coordinates mentally ? Or use keep `calc` handy.

Any Tips and Tricks would be appreciated.

That project is fantastic! I'll soon have need for some clean SVG language icons and these are perfect.

Awesome project. I shamefully admit this is a hobby of mine as well. Glad to see I am not alone.

That is just ... wow! A tiny issue: you missed the Scala icon.

Please send a pull request :-)

Reply on news.ycombinator.com