Lots of websites have started replacing their icon fonts and small icons with SVGs. They support CSS manipulations, animations and are great for responsive sites. But it is important to keep an eye on their size.
How SVGs are included in a page
Since the SVGs are usually small in size, lots of developers decide to inline them. Especially when replacing a web icon font, which can be fetch in a single request.
Some other sites include them as part of the markup, defining them as <symbol />s, and adding a reference to them where they should be rendered through the <use /> tag. I like this one because it is easier to just serve the SVGs used in that page. If you use this, remember to define the symbols above the reference to them, or some browsers (e.g. Safari on iPhone) will not render the SVGs.
In any case, the SVGs are making their way to the critical path, and saving bytes won’t result in a worse experience.
Next step, optimise the SVGs
So far we have our SVGs on the page and they are rendered. SVGs are text-based and they compress really well. However, there is normally room for improvement and we can shave some bytes using an optimiser.
If you have used ImageOptim to optimise bitmap images, then you will love this one. SVGOMG is a website where you drag&drop your SVG and get an optimised version. It uses svgo, which you can also use from the console or as part of your build process.
SVGO will optimise paths and merge layers. If you want to be able to open the optimised SVG and edit in in some tool like Inkscape, remember to save the original one somewhere else.
Going beyond, more optimisations
If you have read this far, you will welcome ideas to further optimise your SVGs. A few weeks ago I came across a series of posts by Andreas Larsen on Medium that I strongly recommend checking out:
Optimising SVGs “by hand” might look a bit tedious and only at reach of a few ones, but the gains are big.
An example: Spotify logo
I decided to try to use some of Andreas’ ideas and try to optimise the Spotify logo.
This is what I did:
Install fontForge: I had to install X11 and then fontForge. fontForge can be used to create and edit fonts, so the grid and rules have been thought for that use case. Still, it can be used for a regular SVG.
Import the SVG that you want to optimise.
Scale it up using Element > Transformations > Transform. We will be rounding the values to integers, so try to find a multiplier that will reduce the error when rounding. Rounding the numbers means that we remove the decimal part, but be careful not to scale the SVG up a lot, or the integer part will also grow.
Simplify the path using Element > Simplify > Simplify. If you see some path being oversimplified, undo and simplify the rest.
Round to integer using Element > Round > To Int.
In my case, I had to tweak the position of the SVG. It might be because I was using wrong values for ascent, descent, underline and height. You can use Element > Font Info > General to modify these values.
Export it as SVG.
Open SVGOMG, import the resulting SVG and download the optimised one.
In my case it went down from 2.24kB to 915 bytes, both compressed as reported by SVGOMG.