Optimising SVGs for Web Use — Part 2½

Published in

Larsenwork

3 min readJan 6, 2016

Let’s test how far down we can go file size wise with the LinkedIn logo using the techniques described in part 1 and part 2 plus some new ones.

I’ve optimised some of the most commonly used social icons, badges and flags here: github.com/larsenwork/web.svg.min

Get the logo

There isn’t an official square .svg version so we’ll have to use the .eps banner version. Let’s remove everything but the logo and crop to a square containing just the logo.

Save the svg

Affinity Designer is my weapon of choice these days but it’s “save for web” svg output is still horribly bloated.

<?xml version=”1.0" standalone=”no”?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width=”100%” height=”100%” viewBox=”0 0 18 18" version=”1.1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" xml:space=”preserve” style=”fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;”><g><path d=”M16.667,0.001l-15.34,0c-0.732,0 -1.327,0.581 -1.327,1.297l0,15.405c0,0.717 0.595,1.297 1.327,1.297l15.34,0c0.734,0 1.333,-0.58 1.333,-1.297l0,-15.405c0,-0.716 -0.599,-1.297 -1.333,-1.297Z” style=”fill:#007bb6;fill-rule:nonzero;”/><path d=”M4.004,2.479c0.854,0 1.547,0.694 1.547,1.547c0,0.855 -0.693,1.549 -1.547,1.549c-0.858,0 -1.549,-0.694 -1.549,-1.549c0,-0.853 0.691,-1.547 1.549,-1.547ZM2.667,6.75l2.672,0l0,8.589l-2.672,0l0,-8.589Z” style=”fill:#fff;fill-rule:nonzero;”/><path d=”M7.014,6.75l2.559,0l0,1.173l0.037,0c0.356,-0.675 1.228,-1.387 2.526,-1.387c2.702,0 3.201,1.778 3.201,4.092l0,4.711l-2.667,0l0,-4.176c0,-0.997 -0.02,-2.278 -1.388,-2.278c-1.389,0 -1.601,1.084 -1.601,2.204l0,4.25l-2.667,0l0,-8.589Z” style=”fill:#fff;fill-rule:nonzero;”/></g></svg>

(SVGO)

(Let’s try quick fixing it by svgo’ing it.)

<svg viewBox=”0 0 18 18" xmlns=”http://www.w3.org/2000/svg" fill-rule=”evenodd” clip-rule=”evenodd” stroke-linejoin=”round” stroke-miterlimit=”1.414"><g fill-rule=”nonzero”><path d=”M16.667 0H1.327C.595 0 0 .583 0 1.3v15.405C0 17.42.595 18 1.327 18h15.34C17.4 18 18 17.42 18 16.703V1.298C18 .582 17.4 0 16.667 0z” fill=”#007bb6"/><path d=”M4.004 2.48a1.548 1.548 0 1 1-.002 3.095 1.548 1.548 0 0 1 .002–3.096zM2.667 6.75H5.34v8.59H2.666V6.75zM7.014 6.75h2.56v1.173h.036c.356-.675 1.228–1.387 2.526–1.387 2.702 0 3.2 1.778 3.2 4.092v4.71H12.67v-4.175c0-.997-.02–2.278–1.388–2.278–1.39 0–1.6 1.084–1.6 2.204v4.25H7.013V6.75z” fill=”#fff”/></g></svg>

We need more

Doing the FontForge magic and removing the background + superfluous meta information leaves us with something like

<svg viewBox=”0 0 800 800"><path d=”M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13–24 44–50 91–50 98 0 116 64 116 148v170h-96V478c0–36–2–82–51–82–50 0–57 39–57 79v154zM220 164c31 0 55 25 55 56s-24 56–55 56–56–25–56–56 25–56 56–56z”/></svg>

Impressive, but we already knew this — let’s trim it even further

Circle

The dot above the i is a circle. Let’s just write it as such.

<svg viewBox=”0 0 800 800"><path d=”M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13–24 44–50 91–50 98 0 116 64 116 148v170h-96V478c0–36–2–82–51–82–50 0–57 39–57 79v154z"/><circle cx=”219"cy=”220"r=”56"></svg>

Remove the last node

Browsers will close the shape for us so let’s remove the last dot in the rectangle. You can only remove the last dot if it’s at a line.

<svg viewBox=”0 0 800 800"><path d=”M268 629h-97V319h97zm157 0h-97V319h93v42h1c13–24 44–50 91–50 98 0 116 64 116 148v170h-96V478c0–36–2–82–51–82–50 0–57 39–57 79v154z"/><circle cx=”219"cy=”220"r=”56"></svg>

(We have deleted “v310” almost at the beginning of the path)

Cubic vs Quadratic

Let’s switch to quadratic in FontForge and see what happens

We have the “Fore” layer with a “C” for cubic on the left and “Quad” with a “Q” on the right. Notice how all quad curves share the handle — that is four less points (five when we also remove the last dot)

<svg viewBox=”0 0 800 800"><path d="M268 629h-97V319h97zm157 0h-97V319h93v42h1q31-50 93-50 114 0 114 133v185h-96V466q0-70-49-70-59 0-59 69z"/><circle cx="219"cy="220"r="56"></svg>

It is worth noting that drawing using quadratic beziers isn’t always better. It doesn’t work for more circular curves like e.g. the Twitter logo.

Bytes saved

We ended up being able to shave more than 85% off without any visible change in appearance.

Affinity Designer        1229 bytes    100.0%
SVGO                      701 bytes     57.0%
FontForge + meta          284 bytes     23.1%    100.0%
Circle ÷ 1 dot            238 bytes     19.3%     83.8%
Quadratic "n" ÷ 1 dot     179 bytes     14.6%     63.0%

I haven’t written part 3 just yet but it will probably be about accessibility in svgs — if anyone has any inputs, then please let me know here: https://github.com/larsenwork/social.svg.min/issues/1

I have optimised 25+ social icons here: https://github.com/larsenwork/social.svg.min