Let’s say you created a lovely vector illustration in Adobe Illustrator. Or you’ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG.
There are several different ways of getting SVG out of Illustrator, each one a bit different. Let’s take a look.
TL;DR: Exporting, like File > Export > Export As… SVG then optimizing is your best bet for the web.
The “Save As…” Method
Illustrator supports SVG as a first-class file format. You can File > Save As… and choose “SVG” as an option, as an alternative to the default `.ai` file format.
data-recalc-dims=1Using Edit > Save As… in Illustrator
There is even a button in the Save SVG options that come up called “SVG Code…” you can click to have Illustrator show you the code before saving it, presumably for copy-and-paste purposes.
If you search the web a bit about the differences between saving in different formats from Illustrator, you’ll find plenty of generic information telling you that SVG is for use on THE WORLD WIDE WEB, so if that’s where you intend to use this graphic, that’s the format you should save in.
Be careful here. Saving as SVG from Illustrator is fine, but the file is absolutely not ready for direct use on the web. When you “Save As…” from Illustrator as SVG, Illustrators primary concern is that you can open that file again in Illustrator just as you left it.
For example, Illustrator has proprietary features that aren’t a part of SVG. A simple example: guides. You won’t lose your guides saving as SVG this way, they are preserved just fine. But guides are meaningless in SVG on the web, so you’d be sending useless data if you use SVG saved this way directly on the web.
The file size of “Save As…” saved Illustrator SVG’s can be several orders of magnitude larger than a really web-ready version. Take a look at the CSS-Tricks logo “Save As…”‘d and one exported for the web.
data-recalc-dims=1410 KB for the “Save As…” version vs. 3 KB for the exported version.
It’s not entirely clear to us why “Save As…”ing as SVG would be a good idea. You may just want to keep files as `.ai` until you want to actually export for the web. Or if you do save as SVG, you might as well use the “Preserve Illustrator Editing Capabilities” checkbox and use a naming convention that is clear this is an “original” file, not a web-ready one.
Wait, “exported version”? Let’s look at that next.
The “Export As” Method
File > Export > Export As… is very different. You are “exporting”, and the implication is that the file that is generated is no longer an Illustrator-friendly and editable file, but a new file specifically for some other purpose.
JPG is one of the options, for example. You wouldn’t expect to be able to edit your vector art after exporting it as a JPG.
SVG is an option here too. The output is vastly different than “Save As…”. Exported SVGs actually are pretty close to web-ready. There is no weird doctype, loads of metadata, or proprietary Illustrator stuff. Exported SVG likely will not open in Illustrator in exactly the same way it was in the original file.
You’ll get a minimal export options screen, like this:
data-recalc-dims=1The SVG Options when exporting SVG.
The options shown there are good defaults. Quick overview:
Styling: “Presentation Attributes” means stuff like fill: red; rather than “Inline Styles” which means style=”fill: red;”. Presentation attributes are easier to override in CSS. Inline styles provide more style resilience. There is also an option to export styles in a