Official vs optimised

Optimising SVGs for Web Use — Part 1

Andreas Larsen
Dec 27, 2015 · 5 min read

In this article I’ll cover the basic concepts of svg path optimisation. Part 2 and part 2½ is where I’m showing you how I’m doing it.

I’ve optimised some of the most commonly used social icons, badges and flags here:

Raison d’être

Why use svg in the first place? Because IE8 is gone and svgs are awesome and should replace icon fonts — explained brilliantly here:

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.


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

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.

The Path

A vector path is drawn over a grid using nodes with optional handles (for those sexy curves). Learn more about them on

There are multiple ways to reduce how much code is needed to draw a path:

Way too many nodes in the CodePen logo

Use fewer nodes

Clean up your curves before exporting. This is especially important if you’ve been tracing. CodePen has forgotten to do this.

(Edit: it has now been fixed)

Use fewer handles

You can sometimes draw an almost identical curve using only one handle instead of two.

Use integers

It’s only a matter of having a big enough grid (called viewbox in SVG terminology) and you won’t be able to tell the difference. These look the same:

Don’t use a grid that is any bigger than necessary

If your grid is big then so are your coordinate values. What you want is a grid that is just big enough that your integers don’t visibly distort your shapes. Exactly what size your grid needs to be depends on how complex your drawings are and what level of detail is needed.

In Short

  1. Fewer nodes
  2. Fewer handles
  3. Use integers
  4. Grid: Big, but not too big.

The result


I’d say the differences are imperceptible — especially at sizes normally used for icons.



Articles on web and type design+development


Articles on web and type design+development

Andreas Larsen

Written by

Jack of all trades — master of some. Design+Code+Type+DIY. Meetup organizer.


Articles on web and type design+development