Optimising Scalable Vector Graphics (svg) for Web

With all the emphasis on site speed and a rise in the adoption of SVGs for web graphics due to increased use of retina type screens, optimising vector graphics has never been more important but not everyone goes to the trouble of ensuring this is always the case. One of the most popular SVG optimisers is SVGO and the tool can be used online here, but don’t assume once the tool has been run that your file cannot be optimised any further.

My top tip to any designer/developer producing SVGs in packages like Illustrator or Inkscape, is to become familiar with the raw code and understand exactly what is going on “underneath the hood” with these files. Once you have got to grips with this, it becomes a lot easier to study the code and see where further optimisations can be made.

As an example I am going to start with a logo that has already been passed through SVGO and is currently 2.04kb in its raw size.

Here is the code (spaced out onto new lines to make easier reading):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-199 245.2 470 112" width="470" height="112">
<style>.b{fill:#fff}.r{fill:#E30613}</style>
<path class="b" d="M102.7 268.5c0-.2.1-.2.3-.2h69.3c.2 0 .2.1.2.2v15.6c0 .2-.1.2-.2.2h-51.8v5.4h51.8c.2 0 .2.1.2.2v15.6c0 .2-.1.2-.2.2h-51.8v5.3h51.8c.2 0 .2.1.2.2V327c0 .2-.1.2-.2.2H103c-.2 0-.3-.1-.3-.2v-58.5zM-111.6 268.3c.2 0 .3.1.3.2V327c0 .2-.1.2-.3.2h-17.9c-.2 0-.3-.1-.3-.2v-58.4c0-.2.1-.2.3-.2h17.9z"/>
<path class="r" d="M-38.9 268.3c.2 0 .2.1.2.2V311h34.3v-42.5c0-.2.1-.2.2-.2h17.3c.2 0 .3.1.3.2V327c0 .2-.1.2-.3.2h-69.3c-.2 0-.3-.1-.3-.2v-58.4c0-.2.1-.2.3-.2h17.3z"/>
<path class="b" d="M-61 268.3H-82.2l-28.7 28.8c-.1.1-.1.1 0 .2l29.9 29.9h20.5c.1 0 .2-.2.1-.2l-29.3-29.3c-.1-.1-.1-.1 0-.2l28.9-28.9c0-.2-.1-.3-.2-.3zM74.5 311.2c-.5.5-1.2.9-1.9 1.3-.8.3-1.8.5-3.1.5H40.8v-9.9h28.7c1.3 0 2.3.1 3 .4.8.3 1.4.7 1.9 1.2.9 1 1.4 2.1 1.4 3.2 0 1.2-.4 2.3-1.3 3.3m-4.9-28.1c1.2 0 2.2.2 2.9.5.7.3 1.3.7 1.9 1.3.8.9 1.1 1.8 1.1 2.9 0 1-.4 2-1.1 2.9-.5.6-1.1 1-1.9 1.4-.7.3-1.7.5-2.9.5H40.8v-9.3h28.8v-.2zm22.5 19.7c-1.2-2.3-3-4.1-5.4-5.2 2.1-1.3 3.7-3 4.8-5 1.1-2.1 1.7-4.4 1.7-6.9s-.4-4.7-1.3-6.7c-.9-1.9-2.1-3.7-3.5-5.1-3.7-3.7-9-5.6-15.8-5.6l-50.3.1v58.8h51.2c3.8 0 7-.5 9.5-1.6 2.6-1 4.7-2.5 6.3-4.3 1.4-1.5 2.5-3.2 3.3-5.1s1.2-3.8 1.2-5.9c.1-2.6-.5-5.2-1.7-7.5M220.8 245.2c14.5 14.5 21.8 33.5 21.8 52.5s-7.3 38-21.8 52.5l-7.6-7.6c12.4-12.4 18.6-28.7 18.6-45s-6.2-32.5-18.6-45l7.6-7.4zm-26.7 26.6c7.2 7.2 10.7 16.5 10.7 25.9s-3.6 18.8-10.7 25.9l-7.6-7.6c5.1-5.1 7.6-11.7 7.6-18.3s-2.5-13.3-7.6-18.3l7.6-7.6zm13.4-13.3c10.8 10.8 16.2 25 16.2 39.2s-5.4 28.4-16.2 39.2l-7.6-7.6c8.7-8.6 13.1-20.1 13.1-31.5s-4.4-22.9-13.1-31.6l7.6-7.7z"/>
<path class="r" d="M-177.2 350.3c-14.5-14.5-21.8-33.5-21.8-52.6 0-19 7.3-38 21.8-52.5l7.6 7.6c-12.5 12.4-18.7 28.7-18.7 44.9 0 16.3 6.2 32.5 18.6 45l-7.5 7.6zm26.6-26.6c-7.2-7.2-10.7-16.5-10.7-25.9s3.6-18.8 10.7-25.9l7.6 7.6c-5.1 5.1-7.6 11.7-7.6 18.3s2.5 13.3 7.6 18.3l-7.6 7.6zm-13.3 13.3c-10.8-10.8-16.2-25-16.2-39.2s5.4-28.4 16.2-39.2l7.6 7.6c-8.7 8.7-13.1 20.2-13.1 31.6s4.4 22.9 13.1 31.6l-7.6 7.6z"/>
</svg>

The first thing to notice is the viewbox, the first two values represent the x,y position of the graphic, and the last two the width and height. Now it may be only a small optimisation, but by adjusting the image starting position to 0,0 in Illustrator and re-running it through SVGO we save 7 bytes.

<svg xmlns="http://www.w3.org/2000/svg" width="470" height="112" viewbox="0 0 470 112">
<style>.b{fill:#fff}.r{fill:#e30613}</style>
<path class="r" d="M21.8 105.1A74.1 74.1 0 0 1 21.8 0l7.6 7.6a63 63 0 0 0-.1 89.9l-7.5 7.6zm26.6-26.6a36.6 36.6 0 0 1 0-51.8l7.6 7.6a25.7 25.7 0 0 0 0 36.6l-7.6 7.6zM35.1 91.8a55.3 55.3 0 0 1 0-78.4l7.6 7.6a44.7 44.7 0 0 0 0 63.2l-7.6 7.6z"/>
<path class="b" d="M301.7 23.3c0-.2.1-.2.3-.2h69.3c.2 0 .2.1.2.2v15.6c0 .2-.1.2-.2.2h-51.8v5.4h51.8c.2 0 .2.1.2.2v15.6c0 .2-.1.2-.2.2h-51.8v5.3h51.8c.2 0 .2.1.2.2v15.8c0 .2-.1.2-.2.2H302c-.2 0-.3-.1-.3-.2V23.3zm-214.3-.2c.2 0 .3.1.3.2v58.5c0 .2-.1.2-.3.2H69.5c-.2 0-.3-.1-.3-.2V23.4c0-.2.1-.2.3-.2h17.9v-.1z"/>
<path class="r" d="M160.1 23.1c.2 0 .2.1.2.2v42.5h34.3V23.3c0-.2.1-.2.2-.2h17.3c.2 0 .3.1.3.2v58.5c0 .2-.1.2-.3.2h-69.3c-.2 0-.3-.1-.3-.2V23.4c0-.2.1-.2.3-.2h17.3v-.1z"/>
<path class="b" d="M138 23.1h-21.2L88.1 51.9c-.1.1-.1.1 0 .2L118 82h20.5l.1-.2-29.3-29.3c-.1-.1-.1-.1 0-.2l28.9-28.9c0-.2-.1-.3-.2-.3zM273.5 66a9 9 0 0 1-1.9 1.3c-.8.3-1.8.5-3.1.5h-28.7v-9.9h28.7a8 8 0 0 1 3 .4 4.9 4.9 0 0 1 3.3 4.4c0 1.2-.4 2.3-1.3 3.3m-4.9-28.1c1.2 0 2.2.2 2.9.5.7.3 1.3.7 1.9 1.3a4 4 0 0 1 1.1 2.9 4.8 4.8 0 0 1-3 4.3c-.7.3-1.7.5-2.9.5h-28.8v-9.3h28.8v-.2zm22.5 19.7c-1.2-2.3-3-4.1-5.4-5.2a13.5 13.5 0 0 0 6.5-11.9 16 16 0 0 0-4.8-11.8c-3.7-3.7-9-5.6-15.8-5.6l-50.3.1V82h51.2c3.8 0 7-.5 9.5-1.6a17.2 17.2 0 0 0 9.6-9.4c.8-1.9 1.2-3.8 1.2-5.9a15 15 0 0 0-1.7-7.5M419.8 0a74 74 0 0 1 0 105l-7.6-7.6a63.4 63.4 0 0 0 0-90l7.6-7.4zm-26.7 26.6a36.6 36.6 0 0 1 0 51.8l-7.6-7.6a25.7 25.7 0 0 0 0-36.6l7.6-7.6zm13.4-13.3a55.3 55.3 0 0 1 0 78.4l-7.6-7.6a44.3 44.3 0 0 0 0-63.1l7.6-7.7z"/>
</svg>

The next thing is to look at the image and see if any elements are duplicated, which in our example is the volume graphic either side of the wording. By defining this as one single plain path, we can use it twice in the file, applying a red fill firstly, and then lastly a white fill and a horizontal transform filter. To do this, we take the first path that starts M21.8 and place it in a definition tag. Next we need to find the white volume path and remove it all together. If you look at the last path you can see in the co-ordinates that there a value of M419.8 which is the start of the white volume path so we can delete this segment from that path. Now all we need to do is create two use tags for the graphic we are going to duplicate and then tidy up the class references which are no longer needed. As a further optimisation any instances of ‘zM’,’z M’ or ‘z m’,’zm’ in a path can be replaced by a single ‘M’ or ‘m’ respectively and similarly any path ending in a ‘z’ can be removed as well saving more precious bytes’. With all these optimisations, we now have a file below that is now only 1.47kb in size a 27% saving on the optimised original.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="470" height="112" viewBox="0 0 470 112">
<defs>
<path id="a" d="M21.8 105.1A74.1 74.1 0 0 1 21.8 0l7.6 7.6a63 63 0 0 0-.1 89.9l-7.5 7.6m26.6-26.6a36.6 36.6 0 0 1 0-51.8l7.6 7.6a25.7 25.7 0 0 0 0 36.6l-7.6 7.6M35.1 91.8a55.3 55.3 0 0 1 0-78.4l7.6 7.6a44.7 44.7 0 0 0 0 63.2l-7.6 7.6"/>
</defs>
<use xlink:href="#a" fill="#E30613"/>
<path fill="#fff" d="M301.7 23.3c0-.2.1-.2.3-.2h69.3c.2 0 .2.1.2.2v15.6c0 .2-.1.2-.2.2h-51.8v5.4h51.8c.2 0 .2.1.2.2v15.6c0 .2-.1.2-.2.2h-51.8v5.3h51.8c.2 0 .2.1.2.2v15.8c0 .2-.1.2-.2.2H302c-.2 0-.3-.1-.3-.2V23.3m-214.3-.2c.2 0 .3.1.3.2v58.5c0 .2-.1.2-.3.2H69.5c-.2 0-.3-.1-.3-.2V23.4c0-.2.1-.2.3-.2h17.9v-.1m50.6 0h-21.2L88.1 51.9c-.1.1-.1.1 0 .2L118 82h20.5l.1-.2-29.3-29.3c-.1-.1-.1-.1 0-.2l28.9-28.9c0-.2-.1-.3-.2-.3M273.5 66a9 9 0 0 1-1.9 1.3c-.8.3-1.8.5-3.1.5h-28.7v-9.9h28.7a8 8 0 0 1 3 .4 4.9 4.9 0 0 1 3.3 4.4c0 1.2-.4 2.3-1.3 3.3m-4.9-28.1c1.2 0 2.2.2 2.9.5.7.3 1.3.7 1.9 1.3a4 4 0 0 1 1.1 2.9 4.8 4.8 0 0 1-3 4.3c-.7.3-1.7.5-2.9.5h-28.8v-9.3h28.8v-.2m22.5 19.7c-1.2-2.3-3-4.1-5.4-5.2a13.5 13.5 0 0 0 6.5-11.9 16 16 0 0 0-4.8-11.8c-3.7-3.7-9-5.6-15.8-5.6l-50.3.1V82h51.2c3.8 0 7-.5 9.5-1.6a17.2 17.2 0 0 0 9.6-9.4c.8-1.9 1.2-3.8 1.2-5.9a15 15 0 0 0-1.7-7.5"/><path fill="#E30613" d="M160.1 23.1c.2 0 .2.1.2.2v42.5h34.3V23.3c0-.2.1-.2.2-.2h17.3c.2 0 .3.1.3.2v58.5c0 .2-.1.2-.3.2h-69.3c-.2 0-.3-.1-.3-.2V23.4c0-.2.1-.2.3-.2h17.3v-.1"/>
<use x="-442" xlink:href="#a" fill="#fff" transform="scale(-1 1)"/>
</svg>

Whilst these optimisations may seem quite small when applied to multiple files, the bandwith savings can be significant.