SVG Optimisation using SVGOMG and FontForge

José M. Pérez
Apr 12, 2016 · 9 min read

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 sites inline the SVGs as part of their CSS file. This can be done uri-encoding the SVG data, or converting it to base 64, but this one results in a larger payload.

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:

  1. 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.
  2. Import the SVG that you want to optimise.
  3. 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.
  4. Simplify the path using Element > Simplify > Simplify. If you see some path being oversimplified, undo and simplify the rest.
  5. Round to integer using Element > Round > To Int.
  6. 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.
  7. Export it as SVG.
  8. 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.

Original:

Optimised:

You can see how the multiple <path />s have been merged into one and the values are now integers.

In this pen I have included both the original and the optimised logo:

Originally published at jmperezperez.com.

José M. Pérez

Written by

Engineer at Facebook. Previously at Spotify. Google Dev Expert in Web technologies. I like JS and performance optimization.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade