Optimising SVGs for Web Use — Part 2½

Andreas Larsen
Jan 6, 2016 · 3 min read

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%

More

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

Larsenwork

Articles on web and type design+development

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store