If you’ve created an illustration that follows the guidelines in my article on how to master Adobe Illustrator workflow for SVG production, you should now have a well-organized vector image ready for export.

Illustrator has long had strong support for SVG; last week Adobe added some new options to Illustrator CC, which I’ll include here. Whichever version you are using, there are three simple steps to exporting an SVG file from Illustrator:

Step 1: Create A Backup

Save a copy of your document in .ai format. While Illustrator does a good job of importing and exporting SVG files, the vector format does not yet have all the features of a native Adobe Illustrator document. If you don’t want to lose those details, save the illustration as an .ai file before proceeding.

Step 2: Select Options

Choose File / Save As and choose the SVG format. (Don’t worry about .svgz, which I will address later in this series). Somewhat oddly, you have to click on Save before Illustrator will let you choose options for the file.

Basic export options remain consistent across all Illustrator versions. As a general rule, so should your settings:

• SVG 1.1 Profile
• SVG Font type
• No subsetting
• Linked images

These settings assume that you will treat the SVG much as you would an HTML document: images and fonts will be referenced as external files, rather than encoded and embedded in the document itself. While the other options have their uses, these settings also have the advantage of producing the smallest possible file size.

If you’re using Illustrator CS6 or earlier, you’ll see an option for Decimal Places. If the Illustrator artboard is measured in pixels, set the value to 1. (In CC, the value is already 1, and hidden elsewhere). If measured in inches or other units, you’ll want a decimal accuracy of 3.

Aside from the ability to see the generated SVG code in an editor (click SVG Code… at the bottom of the dialog window), this is as far as you can go using CS6 or earlier, and you should skip ahead to Step 3. If you’re using Illustrator CC, read on…

Step 2a: Illustrator CC Options

Last week Illustrator CC added a few new options for SVG export. If you’ve upgraded, you can see them by clicking More Options in the bottom left corner of the Save As SVG dialog window.

It’s not often appreciated that presentational attributes can be referenced as styles in SVG. This makes the elements easier to modify and animate, while also reducing repetition and file size. Illustrator CC provides this encoding after selecting Style Elements for the CSS Properties value. As a rule I’d choose this setting but leave other options alone, unless you wanted to add metadata to the file (the Include XMP option).

Illustrator CC also added an option to make the SVG file “responsive”. This is slightly misleading: all the option does is remove the width and height attributes from the SVG root element. The result will be responsive only if you decide to include the file in the context of an HTML <img> tag or CSS background-image property: it will not be responsive if you embed the SVG code directly into your page. (That can happen, but requires a little more work).

Step 3: Save The File

When you’re done, save the SVG file in a site folder (assets/svg, for example), together with any linked assets. Just like bitmap images, there are further optimization steps we could take after this point: either by hand, if it was a small file, or via one of the tools I will introduce in next week’s article.

Further Resources

Val Head has an excellent 11-minute video on YouTube on exporting SVG from Illustrator, with a focus on exporting for animation.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.