4 ms·

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

by edent 6y ago

If you're interested in minifying SVGs by hand, we're creating SVG icons in under 1KB at https://github.com/edent/SuperTinyIcons/ https://github.com/edent/SuperTinyIcons/ We could do with some help on the accuracy of some of them :-)

liquidise 6y ago
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.
mawise 6y ago
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'.
- nyanpasu64 6y ago
  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 https://news.ycombinator.com/item?id=14310652
nashashmi 6y ago
Awesome project. I shamefully admit this is a hobby of mine as well. Glad to see I am not alone.
dxxvi 6y ago
That is just ... wow! A tiny issue: you missed the Scala icon.
- edent 6y ago
  Please send a pull request :-)
pselbert 6y ago
That project is fantastic! I'll soon have need for some clean SVG language icons and these are perfect.
tleb_ 6y ago
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.
- lima 6y ago
  > 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/ http://www.http2demo.io/
  - tleb_ 6y ago
    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/d0518022b7a02d405ad5112a0c8aa455cbfe952e/68747470733a2f2f6564656e742e6769746875622e696f2f537570657254696e7949636f6e732f696d616765732f7376672f6769746875622e737667 https://camo.githubusercontent.com/d0518022b7a02d405ad5112a0... [1]: https://blog.cloudflare.com/hpack-the-silent-killer-feature-of-http-2/ https://blog.cloudflare.com/hpack-the-silent-killer-feature-...
- Hitton 6y ago
  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-svg/6 https://www.creativebloq.com/features/the-complete-guide-to-...
lenkite 6y ago
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.

by edent 6y ago

liquidise 6y ago

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.

mawise 6y ago

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'.

nyanpasu64 6y ago
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 https://news.ycombinator.com/item?id=14310652

nashashmi 6y ago

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

dxxvi 6y ago

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

edent 6y ago
Please send a pull request :-)

pselbert 6y ago

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

tleb_ 6y ago

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.

lima 6y ago
> 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/ http://www.http2demo.io/
- tleb_ 6y ago
  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/d0518022b7a02d405ad5112a0c8aa455cbfe952e/68747470733a2f2f6564656e742e6769746875622e696f2f537570657254696e7949636f6e732f696d616765732f7376672f6769746875622e737667 https://camo.githubusercontent.com/d0518022b7a02d405ad5112a0... [1]: https://blog.cloudflare.com/hpack-the-silent-killer-feature-of-http-2/ https://blog.cloudflare.com/hpack-the-silent-killer-feature-...
Hitton 6y ago
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-svg/6 https://www.creativebloq.com/features/the-complete-guide-to-...

lenkite 6y ago

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.