3 ways to export SVG in Illustrator

Design3 min readView on GitHub

Here’s a quick tip of all the ways you can export SVG in Illustrator. Each has their conveniences, advantages and disadvantages. It’s entirely up to you which you use, there isn’t really a bad way.

Copy, paste, & save

It’s in the title. Copy any set of vector paths and into your text editor paste the contents, that’s it. The code that it exports is the same as ‘Save As’.


To use export, this is a new feature from the November 2015 update. So if you’re not on the latest version of Illustrator CC it won’t be available.

It works similarly to Save As, except there are more SVG tailored options. The minify option is particularly handy. Which isn't present in ‘Save As’.

Flexible output

The difference between Export and Save As is the output. Export has the option of a much more refined output. Save As is fine, it can be used to remain editable with Illustrator, like an .ai file.

If you’ve ever been frustrated with the way Illustrator adds extra numbers to the id, changing the options will solve your problem. Overall it’s much more favoured to web use now.

As a heads up if you have the latest version of Illustrator, this is probably the method you should use.

Assign export to a keyboard shortcut

The only issue is it’s not assigned to a keyboard shortcut. The way to set keyboard shortcuts is pressing cmd + alt + shift + k, or going to Edit > Keyboard Shortcuts in the menu.

You will be presented with this window. Make sure the dropdown menu below the ’Set’ one is on ‘Menu Commands’. Expand file in the command column and find ‘Export’. Next is to click in the shortcut column to begin setting the shortcut.

I recommend setting it to cmd + shift + e. You may be asked to replace an existing shortcut, this is your choice if you want to replace it.

Save as

Typically this is the way we would save SVG. If you’re on an older version of Illustrator is the method to use. Pressing cmd + shift + s to open the save window.

As you can see it will prompt you to use export.

Make sure to check ‘Use Artboards’. Otherwise you will want to Save a Copy cmd + alt + s. This makes sure any further edits are made to the original .ai file. After clicking save you will be presented with an opportunity to customise your SVG.

Three ways to export

They’re all valid ways to export, to an extent, each with different reasoning. If you’re wanting to quickly test what an SVG looks like and iterate on it, the copy and paste method is great.

If you’re looking to prepare them for web use, then Export is the way to go. Otherwise, Save As doesn’t really have much of a place beyond this, but it’s useful to know why.

I’m a tea drinker, but it’s equally appreciated if you found the article useful.

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.