Saving better SVG files

So you've created a lovely vector image in Illustrator but your (probably grumpy and rant prone) web developer has asked for it in SVG format. What now?

You could simply save the image as an SVG and be done with it, but there's a little more you could do to make things even better and allow your dev more time crying under his desk because IE is breaking everything again and why won't that CSS just bloody well…

Aaaanyway…

Preparing the image

Here's our happy vector image:

Let's get that Artboard sorted. From the Object menu select Artboards then Fit to Artboard Bounds:

Great! You might want some space around the image but from a front-end developer perspective I would rather control that using CSS.

Now let's save the image as an SVG file. From the File menu select Save As…:

In the Format selection box choose SVG (sag):

Whoa lots of options, but don't worry just leave the profile at SVG 1.1. You'll almost always want to leave it at this however for further info on the SVG Options see this answer on Stack Overflow.

We should now have a happy SVG image:

Optimising the markup

If you don't have it already download the SVGO-GUI app from Github. SVGO-GUI will optimise your SVG file by removing the unnecessary code Illustrator adds and [minifying](http://en.wikipedia.org/wiki/Minification_(programming\)) the markup to create a smaller file.

Once downloaded open the app and drag your SVG file to the area that says "Drag your SVG file(s) here." (or you can simply drag it to the app icon).

Done! We now have an SVG file ready for use on the web.

Before and after optimisation

Unoptimised Illustrator file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
<g>

        <circle fill="none" stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="26" cy="26" r="24"/>
    <path fill="none" stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M41.7,27.7c0,8.6-7.1,16.1-15.7,16.1c-8.6,0-15.7-7.4-15.7-16.1"/>
    <path fill="none" stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M11.9,21.9c0-2.3,2.4-4.2,4.7-4.2c2.3,0,4.4,1.9,4.4,4.2"/>
    <path fill="none" stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M40.1,21.9c0-2.3-2.4-4.2-4.7-4.2c-2.3,0-4.4,1.9-4.4,4.2"/>
</g>
</svg>

Optimised SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" enable-background="new 0 0 52 52"><g stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><circle cx="26" cy="26" r="24"/><path d="M41.7 27.7c0 8.6-7.1 16.1-15.7 16.1s-15.7-7.4-15.7-16.1"/><path d="M11.9 21.9c0-2.3 2.4-4.2 4.7-4.2 2.3 0 4.4 1.9 4.4 4.2"/><path d="M40.1 21.9c0-2.3-2.4-4.2-4.7-4.2-2.3 0-4.4 1.9-4.4 4.2"/></g></svg>

Optimised file size

And we've cut the file from 1,191 bytes in half to 454 bytes. Obviously this is a small example file so your gains may be greater or lesser depending on your image.

Further reading

Export SVG for the web with Illustrator CC by Posted by Michael Chaize

Let me know on Twitter (@NotRenton) if I've missed anything out or if this Pro Tip could be optimised in any way.