gq3sbg
Last Updated: March 11, 2017
·
5.377K
· ryanroberts
D36997a4a5fb11e3806c1267eff66efd 8

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:

Picture

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

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" "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.

Say Thanks
Respond

10 Responses
Add your response

13522
0e631d686b8356102da3721bd8cd65c4

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 ·
13529
D36997a4a5fb11e3806c1267eff66efd 8

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 ·
13560
0 nfyu8txkcy7l9htqq8v08golvgypn tq96e18gxteze wf5n43u8aci7u1puckp4vxyt753o6cjr

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 ·
13561
2009 01 28 009 smallest normal

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

over 1 year ago ·
13592
D36997a4a5fb11e3806c1267eff66efd 8

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

over 1 year ago ·
13593
D36997a4a5fb11e3806c1267eff66efd 8

@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 ·
13609
B8f8f573e852c25d5750027fdb5ca38f

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

over 1 year ago ·
13610
B8f8f573e852c25d5750027fdb5ca38f

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 ·
13613
D36997a4a5fb11e3806c1267eff66efd 8
over 1 year ago ·
13649
D3b2094f1b3386e660bb737e797f5dcc

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 ·