Exporting an SVG from Illustrator


I wasn’t going to write a post on this because there’s a perfectly in-depth post about it on Adobe’s own site, but I’ve been unable to find this option enough times to warrant really making it explicit.

Generally when I save files out of Illustrator, you go to the Export option, however in this case if you want to export an SVG for the web with Adobe Illustrator, there is no trace of ‘SVG’ in the Export option. Helpful. Instead, to save out a file as a SVG, go to File > Save As, then choose SVG under Format.

Generally I just go with the default options, and maybe change Type to SVG instead of Adobe CEF. This is what the blog advises:

In Illustrator CC (and CS6), you have several ways to export images from the vector shapes you design. If you choose File > Export, you'll see that you can output PNG, Flash, AutoCAD, TIFF, and Photoshop files, but not SVG files. Interesting. If you try File > Save For Web (since you are targeting web browsers), you'll notice that you can output PNG, GIF, or JPEG files. No trace of SVG.

To export SVG files from Illustrator, you need to choose File > Save As. An SVG file is just an XML file, and Illustrator can store private information inside to edit the file later. It's a way to save a full Illustrator file in XML (another use case for SVG).

Notice the Use Artboards options in the Save As dialog box. If you have designed 10 symbols in your Illustrator file, you can use this option to easily create one artboard per symbol and output 10 SVG files (one per symbol) in a single operation. If you are not familiar with artboards in Illustrator, check out the tutorial, Scripting for Illustrator CS6, in which I explain how to create artboards that will automatically fit your content. fig01

Click Save and examine the SVG Options panel.

These options are optimal in most situations:
  • Profile: SVG 1.1
  • Fonts: Type — SVG; Subsetting — Only Glyphs Used (if you use a special font for your artwork)
  • Image Location: Link
  • CSS Properties: Style Elements
  • Decimal Places: 1
  • Output Fewer <tspan> Elements: Select this option
  • Use <textPath> Element For Text On Path: Select this option

I don’t really have much to do with vectors so the other part of the post is not really of use to me yet. But one day I do hope I get better at them and actually figure out how to get them working, so maybe one day I’ll come back and revisit this post.