Last Updated: March 11, 2017
· ryanroberts

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…


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:

Artboards Menu

Artboard fit to image 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…:

Save As

In the Format selection box choose SVG (sag):

Save format is SVG

SVG Options

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:

An happy SVG file

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](\)) 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).

Drag to SVGO-GUI

The optimised file

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" "">
<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
     viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">

        <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="
    <path fill="none" stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    <path fill="none" stroke="#F7931E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="

Optimised SVG file:

<svg xmlns="" 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.

10 Responses
Add your response


Great post! One thing I might suggest is that it might better not to optimize the file if you're storing it in a VCS like git. (Instead, this can be done as part of a build step.) That's because (since SVG isn't a binary format like PNGs or JPEGs) you can actually get useful diffs when they change! Having all the file contents in one line puts a damper on that.

over 1 year ago ·

That's a good point and something I hadn't thought about before. I might look for an alternative way to clean up an XML file without minifying it.

over 1 year ago ·

Why not to keep both files, just like is common to do with CSS and JS? One file for development and another one, minified, for production.

over 1 year ago ·

If you select "more options" from within Illustrator you can reduce the number of decimal places from 3 to 1

over 1 year ago ·

@webfliccy What does this actually do? I can't fiddle with it just now but I'll try later.

over 1 year ago ·

@robsonsobral Yeah this is something I the dev could do giving the designer less to consider, as well as using a Grunt (or whatever) workflow to make it even easier for themselves.

This was more aimed at designers and devs with a much simpler workflow though.

over 1 year ago ·

Am I the only one who noticed the "horseporn" easter egg? :))

over 1 year ago ·

Actually the minified version is DRY and not very hard to read. It applies the properties on the parent element (<g>) so the child elements just get coordinates, and don't need to specify stroke color & width for each element. It's like writing DRYer css & html.

over 1 year ago ·
over 1 year ago ·

Agree with @matthewwithanm

Keep the unoptimized source in source control, use Grunt (or gulp or whatever) to optimize your build artifacts. The svgmin task can automate SVG optimization.

over 1 year ago ·