Raison d’être

IE8 use where I live is 0.35% 🤗

Why use svg in the first place? Because IE8 is gone and svgs are awesome and should replace icon fonts — explained brilliantly here: https://css-tricks.com/icon-fonts-vs-svg/

Why care about optimising them? Pure graphic designers care only about how their drawing looks. This was sufficient when graphics were printed out or rasterised into pngs. But using vector graphics every extra node, handle, decimal point and superfluous meta information adds to the total vector file size.

Why care about e.g. 635 bytes? When you aren’t optimising svg’s they still aren’t that big compared to rasterised graphics but as soon as you are using just a couple of icons on your page it all adds up and every byte and millisecond counts.

Also, you’ll sleep better at night knowing your website is flying as fast as possible.

NB

I’ll only be talking about optimising the actual drawing but do note that you can shave of a lot of excess meta information too — svgo is great for this (available as apps, tasks, folder action, etc…).

This is all that’s needed do draw a small square when inlining svg:<svg viewbox=”0 0 3 3">

<path d=”M1 1 l1 0 l0 1l-1 0z”/>

</svg>

If you’re repeatedly inlining the same SVG in one document you’re doing it wrong. Use svg sprites — this 3 min Medium read explains why and how.