Webmasters Gallery

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.

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.

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:

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 block within the SVG, which may be efficient on SVG with lots of similar elements.
• Font: “SVG” means to use elements (and friends), which is extremely efficient, provided the fonts you’ve used are available on the web site you intended to use it on. “Convert to Outlines” will turn the text into vector shapes on export, making sure it will look exactly right, but losing efficient, accessibility, searchability, and copy-ability.
• Images: “Link” means that if there happens to be raster graphics within the SVG, it will link out to them rather than embedding them within the SVG, versus “Embed”ding them.
• Object ID’s: Unique ensures that every ID is unique (good for the web), but you also have the option to make them very short (“Minimal”) or be based on layer names.
• Decimal: 2 is probably fine. You’d only go up if you knew you were working with a really tiny viewBox and needed a lot of precision, or down if you were working on a giant viewBox.
• Minify: We’re exporting for the web, so, yes.
• Responsive: On means “don’t put width and height attribute”. Off means do. It actually might be smart leaving this off (see here).

Exporting this way is definitely good for the web. Although SVGO can still squeak a little bit more efficiency out of it yet, depending on the graphic of course.

The “Export for Screens” Method

Since version CC 2017, Illustrator has an File > Export > Export for Screens… method built specifically for exporting for digital devices. I’d say “the web”, but it has features for exporting for iOS and Android, so “Screens”, as they say, is appropriate.

This brings up an options dialog allowing us to select our artwork in different ways and exports the parts we want in the formats we want.

This is really convenient UI! We can export just parts of our illustration in not only SVG, but other formats as well, at the same exact time. Picture an icon system. 20 artboards in a single document, and with one command you export all of them as SVG and multiple resolutions of PNG. Pretty nice.

Under the hood, it appears to be using the same system as “Export”, so you’ll get web-optimized output.

Artboards is one way of splitting up artwork to be exported separately. There is also an Asset Export panel that allows you to drag-and-drop bits of artwork intended to be output separately.

The “Copy Directly from the Artboard” Method

Speaking of selecting individual bits of artwork intended to be used as SVG, there is a slightly-lesser-known way to extract bits, and that’s as simple as Edit > Copy.

After copying, your clipboard will have inline SVG code on it that you can paste as text.

The code that you get is slightly different than any method we’ve looked at so far. It’s closest to the “Save As…” format though, in that you get the XML doctype and such. It’s not the web-optimized format we get from exporting. It does have it’s own viewBox cropped exactly to the elements edges.

If you use this to drop SVG right into your HTML, plan to do a little manual code cleanup.

Now that you have the SVG…

… now what?

• Perhaps you’re gathering individual SVG icon files for use in an SVG icon system. As in, using a build tool to process them into a single file full of s to .
• Perhaps you needed the `.svg` to use as an .
• Perhaps you needed the `.svg` to use as a background-image in CSS.
• Perhaps you’re going to drop the SVG code into HTML directly as inline SVG.

There are many ways to use SVG, but that always starts with getting the SVG to work with in the first place.

The Different Ways of Getting SVG Out of Adobe Illustrator is a post from CSS-Tricks