3 ms·

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

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

by tleb_ 6y ago

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