Export SVG for the web with Illustrator CC

History

Scalable Vector Graphics isn’t a new format: The W3C started work on it in 1999. The consortium recommends the use of SVG 1.1 (since 2001), as version 1.2 is still a working draft. Adobe was deeply involved in the development of SVG back in the days. The Adobe SVG Viewer is a very advanced plugin that supports most of the SVG specification. However, Adobe discontinued the support for the SVG Viewer 4 years ago.

Today, SVG 1.1 is supported by the vast majority of web browsers, on the desktop and mobile devices. It works everywhere except IE 8 (and down) and Android 2.3 (and down). The rebirth of SVG is a consequence of the rise of mobile devices and the introduction of different screen densities. Vector graphics can be very interesting for designers who need to display icons, symbols or logos that will look great on all screens, including retina displays. SVG graphics naturally scale and are usually small and automatically compressed by web HTTP servers (using automatic gzip compression).

Adobe Illustrator CC is the software of choice for designing vector graphics. In this post, I’ll cover the best export options to produce quality SVG files for your websites, with the smallest file size possible.

Illustrator and SVG

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 se 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. Indeed, a SVG file is just an XML file, and Illustrator can store inside private information to edit the file later on. It’s a way to save a full Illustrator file in XML (another use case for SVG).

File > Save As… SVG file.

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 this article about Illustrator files in the Creative Cloud: I explain how to create artboards that will automatically fit your content.

Next, click on Save and examine the SVG Options panel:

The panel and the options I use to export SVG for the web

The best export options for the web

If you are in a rush, use the options as shown on the screenshot (summarized below):

Profile: SVG 1.1

Fonts: Type SVG – 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

Use <textPath> element for Text on Path

For more details on these settings, continue reading.

SVG 1.1? SVG Tiny? SVG Basic?

The SVG profiles

The best option is SVG 1.1 as it’s the version recommended by the W3C. SVG Tiny was created a long time ago to support the first generation of mobile devices such as Blackberry phones andPDAs. Today, it doesn’t make sense to export SVG Tiny files if you target smartphones.

Fonts – Type and subsetting

How to embed fonts

By default, Illustrator selects Adobe CEF, which is the best font format for the Adobe SVG Viewer. Web designers must select the type “SVG”, to enable the font format defined by the W3C.

With SVG, you can save a subset of glyphs within the document. This will, of course, increase the size of your SVG file, but it’s a nice way to embed a font. If you don’t plan to dynamically change the text content of your SVG, you can select “Only glyphs used”. Illustrator will detect and embed the characters used in your document.

The third option, “Convert to outline”, can be useful if you don’t want to automatically convert your text content into SVG paths. This can be used for an icon with a few characters such as “Home”, or “Info”.

The file size difference between a subset of glyphs and converted fonts to SVG paths is not significant.

However, if you use complex fonts (such as handwriting fonts), it will dramatically increase the size of your SVG file. Also, if you scale down to much a font converted to outlined paths, you may lose some visual fidelity (but that’s just in theory, I cannot detect a clear difference in modern browsers).

EDIT:

Some SVG experts told me that SVG fonts are not fully supported by Firefox and IE, and they don’t plan to support it. So, if you don’t want to convert your fonts to outline, you should use web fonts. “Convert to outline” can blow up your SVG files and make them less accessible. That’s why web fonts are a better option. If you are looking for a set of free web font, check the Adobe Edge Web Fonts, which is a free subset of Typekit.

Check this sample in which I’ve embedded a classic font (Adobe Clean), and a more complex one (ChalkDust).

Click on the image to test this sample and resize your window.

Image options

Options for images

You can choose between embedding the images (bitmaps) within the SVG file, or as a link to an external resource. Here is how it translates in SVG:

Web designers will quickly understand that it requires some cleaning up The link to an external resource is obviously the best option, but the relative link is weird as it points to the original file on your hard disk. Also, if Illustrator decides to output a JPEG file, you cannot control the compression.

The best way to proceed is to use the LINK option, and then modify the href parameter to point to your own image file, which you compress with Photoshop CC.

Options – Preserve Illustrator capabilities

Editing capabilities

As I noted previously, SVG can be used as a way to save your Illustrator creations. By adding private information in the XML, Illustrator can save editing parameters in the file. All this information is obviously useless for the web, and tha leads to a common mistake. I’ve met web designers who criticized the file size of SVG graphics produced with Illustrator. In all cases, it was because they had not disabled the “Preserve Illustrator Editing capabilities” option. Here is the difference in file size for a simple SVG file that is just a rectangle:

If you check “Preserve Illustrator capabilities”: 407Kb

Same file but disabling the option: 0.5Kb

More options – Optimization gems

Click on More options

The advanced options unveiled by clicking the “More Options” button are critical for web designers. It enables key optimization tricks to reduce the size of your SVG files.

By the way, notice the two buttons “SVG Code” and “Browser Preview”. These let you play with the export options, and preview your result before pushing the Save button.

Let’s start with maths:

Decimal Places

Precision

This parameter is useful to define the precision of vectors exported. Considr the following simple “moon” shape.

Try to see a visual difference between these 2 SVG files. Click on the image to test it.

In this sample, I’m displaying the same artwork exported with a decimal place setting of 7 and then 1. Honestly, can you see a difference? The big difference resides in the file sizes: 31Kb vs. 12.7Kb.

So for the web, I just use “1”.

Optimize your artworks reducing the number of vectors

The more you add points in your artwork, the heavier your SVG file will be, as it just describes vector coordinates in the <path> element. A quick and nice way to reduce the number of vectors is to use the warp tool.

The Warp tool (Shift+R) molds objects with the movement of the cursor (like molding clay, for example).

As a designer, I like the Warp tool because it gives me the freedom to draw and respect the energy of my artwork. It’s a manual operation though.

Object > Path > Simplify

You can also trust an Illustrator algorithm and use the “Simplify” process. It’s in the Object > Path > Simplify menu. What I don’t like with “Simplify” is that it’s “all or nothing”. With the Warp tool, I can decide which part of my drawing I want to simplify, and where I want to keep some details.

If you plan to add details, or simplify very specific areas of your work, you can rely on the Pencil tool. Pressing ALT will activate the Smooth tool and enable the most precise way to reduce the number of points on a specific curve.

The Pencil tool

More options for web designers

More options for web designers

Don’t select the “Optimize for Adobe SVG Viewer” option. SVG is supported by default in all browsers, without any Adobe plugin.

“Include Slicing data” : Well… Slicing?.. No thank you.

“Include XMP” : If you’re working in a super-organized environment, with automated workflows by the NASA, or if you’re insanely maniac, you can add some XML metadata.

“Output fewer <tspan> elements”:

tspan

If your SVG artwork contains a lot of text, this option can dramatically reduce the size of your exported SVG. In this sample, I’ll just write ‘Adobe’ and export it without checking this option:

Illustrator CC generated two <tspan> elements. One for the capital “A”, and another one for “dobe”. It’s because the Myriad-Roman applies a specific kerning for the uppercase letters.

Text is problematic in SVG because it’s hard to have a perfect translation from CoolType to SVG without selecting particular glyphs. Adding <tspan> elements does the trick, but you’ll lose the semantic meaning.

If you check the box, Illustrator CC will ignore the kerning positions and create one tspan:

<tspan font-family="'MyriadPro-Regular'"font-size="23">A fool thinks himself to be wise, but a wise man knows himself to be a fool.</tspan></textPath>

</text>

FREE TIP FROM 2002: Notice the startOffset parameter and play with it in JavaScript, if you want to create a cheesy animation.

CSS Properties and graphic styles

Select style elements

I invite you to select the option “Style Elements” which has been designed for the web. The other ones are more for pure XML processing (with XSLT for instance). If you don’t plan to modify your SVG code after export, select the default option “Presentation Attributes”.

Illustrator CCwill detect the graphic styles of your artwork and translate them into CSS properties at the top of the document, so that you can easily style your SVG afterwards.

Naming is preserved for layers and objects styles. Look at this sample:

Two layers

It has two layers named “myCircle” and “mySquare”.

Name your Graphic Styles

I’ve also defined two graphic styles: sandStyle (already applied to the two shapes), and blueSky.

Unused Graphic Styles

In the SVG export options, I select “Style Elements”, and I check “Include Unused Graphic Styles”. It will declare “sandStyle” and “blueSky” as CSS styles in the SVG document. Here is the SVG output generated by Illustrator CC:

Requests / Feedback ?

If you need more features in Illustrator CC to export quality SVG files for the web, now is the perfect time to give us feedback. Please post a comment, and I’ll make sure that the Illustrator team considers your feedback. Thanks!

45 Comments

So, is there any way to get character / paragraph styles applied as classes like you can do with graphic styles? It’d be a thousand times better than the stX styles that get auto-generated, and we could more easily export and style SVGs for various environments without doing it all in illustrator.

Hi Charlie, this is exactly the kind of feedback I’m looking for. As you can guess, working on this tutorial, I’ve tried the same: Paragraph / Character styles converted into CSS. Indeed, it’s not translated. This is a part of the feedback list I’m writing now for the Illustrator team. I also would like to see a better integration with web fonts (automatically declare Typekit and Edge web fonts).

Yeah, so basically we’d want to export an SVG and have all of the graphic styles / character styles translated into classes. This way we can create a set of styles illustrators can use to maintain consistency. When exported as SVGs we can use the classes to target different platforms. Terminals, websites and print all have different styles, and using SVG with stylesheets would save everyone a lot of time (and we can’t really expect the illustrators to manually edit the SVG files).

Any idea how responsive the team is to feedback? This is sort of a blocker for our team here as we try to update the workflow.

Great write-up! As a web designer myself, I happened to stumble upon an inconsistency for the text to SVG using Firefox (ver 22.0).

The “Adobe Clean Font – embed glyph” renders like Times New Roman, while the more complex “Chalkduster font – Embed glyphs” renders perfectly. Thought this was an interesting and unexpected result and wanted to share for anyone who might be interested.

Again, great write-up and great tips along the way for optimizing file sizes!

In CS6, naming elements (within layers) will produce an ID for each element. However, applying ‘classes’ in CS6 doesn’t work.

The SVG Options dialogue box (advanced section) in both CS6 & CC allow you to choose ‘Style Elements’. In CC this option creates classes named with the Graphic Styles you have created, and also provides a check box to include all Graphic Styles if you have more than one.
HOWEVER in CS6 the ‘Style Elements’ option does NOT seem to produce classes named from you Graphic Styles. Instead it assigns its own class names like .st0 .st1 etc. This is quite useless.

As CS6 will not receive any updates to fix this, the only option is to use CC. Unfortunately CC has its own limitations. I have set out a suggestion for improvement below…

–SUGGESTION FOR IMPROVEMENT to CC–

Michael, Im a Web-Front-End Designer & Developer. It would be fantastic if you would consider this in your list of improvements for the Illustrator Dev team:-

The NEED: Web Devs often need to control the style of the SVG entirely from an external CSS file.

The PROBLEM: Currently CC produces class names only from Graphic Styles, but then embeds those styles into the SVG code. This is effectively ‘inline styling’ and cannot be over-ridden. This too is quite useless.

An IMPROVEMENT: Provide the ability to apply class name(s) to an element INDEPENDENTLY of the Graphic styles. In other words, give us the ability to attach ONLY the name, without declaring the styles in the code above it. This would allow us to style it via external CSS.

For better performance, it is actually beneficial to embed images in the SVG file instead of linking to an external file because, even though it’s not easy to manually update the file later, it cuts down on the extra HTTP request your browser will have to make.

Joe, I agree with you (partly). It’s true that by embedding the binary content of the image you will cut down an extra HTTP request. You’re basically saving the ‘overhead’ time and some latency. However, by embedding images we have two problems: 1) as you mention, manually updating the image later is cumbersome. At the end, it might be OK if we just copy and replace the binary content in the XML, but if you’re iterating pretty quick, it might be a drag. This could be solved however, if you link during development phase and embed after production. 2) This might be an edge case, but content-rich sites can really benefit from lazy loading images and media. By embedding the binary content directly in the svg, you can’t lazy load it. Lazy loading images would be useful if we have an image intensive svg, especially interactive animations where some images appear only in specific states.

Great article. I’ve been messing with this lately and it’s been hard to find real examples about it. I hope this start to change.
one question, do you know why sometimes illustrator uses POLYLINEs instead of PATHs? thanks

Wow! Very good and comprehensive article. I have a question though that I’ve always wondered, is there any point to save the file in the compressed svgz format when I already have gzip enabled on the server (apache) or is it just unnecessary?

Thank you for this amazingly helpful post, which saved me a lot of trial-and-error. I wonder if you could expand a bit more on the saving multiple artboards automatically to multiple .svg files. If I choose File > Save As, in the Save As dialogue, there is an option ‘use artboards’, however this is greyed out and unchecked, and I don’t seem to see how I can enable this?

I hope to strike while the iron is hot here— I use Adobe Illustrator for generating graphic images for Wikimedia Commons, and I regularly find myself fighting to reduce file size while maintaining future editability of my images. One of the very nice features of Illustrator is the ability to create gradients across strokes— this allows me to create lovely curved 3-D looking cylinders (imagine a worm, for example) but as soon as I turn the image into an SVG file, all such gradients across strokes become converted into images… Usually choppy ones at that. If I could have just one wish, it would be for Illustrator to be able to retain the crisp, clean appearance of a stroke with a gradient across it when it converts the image into an SVG file: other editors on Wikimedia do not want diagrams with images in them because these images are not easily editable by others! So far I have just been compromising as best I can and wincing at the occasional poor grammar used in the program (e.g., on the Save as an SVG dialogue panel, at the bottom there is a button that says, “Less options”— it is “fewer” not “less” in this case, and I am amazed that no one at Adobe has bothered to fix this sort of slip-up! There are about three or four more that regularly gall me— contact me for details if you really wanna know, I won’t bore you here).

A gradient across a stroke that doesn’t end up as an image… An external glow that works the same way… and a solution that doesn’t triple my file size… without any English mistakes…. I am a dreamer! Thanks for considering my suggestions!

Hi Kirby and thanks for your feedback! It would be awesome if you could send me some sample files (.ai files)! and some comments in an email. The Illustrator team is actually actively working on improving the SVG output, and we are making good progress.

When I Save as SVG from Illustrator the kerning and tracking aren’t very accurately represented. It looks like it’s being rounding to the nearest integer pixel based on the font size even though the SVG specification defines “letter-spacing” as a real-number value.
This is fine if the text object has the same attributes throughout but for text that changes colors or point size it’s a big problem. If a long sentence of black 12pt text has a non-100 based tracking value and the last word is made red, the separate “red” tspan element will not line up correctly with the rest of the sentence.
I’ve been trying to find a way around this for months and haven’t found a solution yet other than converting to outline – but that’s not an option for my scenario.
Is anyone else aware of this?

Converting layer names as id’s is nice, but the inability to directly assign class names is cumbersome. As soon as you want to do something even slightly advanced, you need specific classnames, not tied to styles. Imagine making websites without class names

Adobe has contributed beautifully to the svg ecosystem with snapsvg.js, are there any plans to optimise Illustrator for the authoring of advanced svg?

What is absolutely driving me crazy: I am making graphics for a software project, and using the layer/group/id names in illustrator to later dynamically change certain things in the SVG. This works just fine until you duplicate a layer in illustrator: I duplicate a layer named “Mycircle” and then change the layer name in illustrator to “Mycircle2”. When I view the SVG code the id name now looks like this: Mycircle_1_ and Mycircle2_1_

Hi there, thanks for the extensive info. What I’m looking for is why I don’t get the height and the width attributes set in the text tag. While it is there for instance for the RECT tag. And I did see svg’s with the TEXT tag that had those width and height properties. I just can’t seem to get those while exporting from Illustrator.

I’m currently working on some icons for our new agency website… When try to export files with gradients, which assigned to nicely named graphic styles, illustrator keeps exporting a strange st-class for every new gradient i’m generating and refuses to assign my class, like:

Thanks for the writeup about fewer tspan elements. I was able to help someone with their problem in getting text to not be split up into tspan elements and I learned something about Illustrator. Really useful!

I would really like the option that would prevent Illustrator to modify (at least) untouched svg elements. For instance if I open svg file with Illustrator will rewrite it as . Why? Adding class is not a problem, however, changing x&y attributes with transform is, because we preprocess and postprocess our svgs for web. If I remember correctly, Illustrator also removes data- attributes used in html5. Fixing this two would really help. Cheers!

A couple of weeks ago im made alot of typoegraphic letters on illustrator – then for some reason i saved it as an SVG (files / scrips / savedocasSVG ) and its save each induvidual letter.
I want to do it again but its not working.
Was that like a glitch or something.

(1) Why does Illustrator CS6/CC add “-01” to the file name whenever I “save as” my .ai artwork as SVG 1.1? The .svg is being stored in a different folder from the .ai file.

(2) You advise linking rather than embedding the image, but Illustrator’s own tool-tip for the “Link” option says that linked artwork will be saved in either .jpg or .png format. How do .jpg and .png bitmaps become infinitely scalable vector artwork — the whole point of SVG? Is the vector artwork being generated on the fly with the .png/.jpg serving as a thumbnail preview per .eps? Is there really any increase in quality and speed, or are we just trading the time it takes to load larger embedded files for the time it takes to generate vector artwork on the fly?

Exceptionally useful article, thank you for taking the time to write and share it. Illustrator CC is an integral part of my workflow for creating data visualisations with D3 so having this SVG export ability in CC is great. One question, is there any way to export SVG data straight to JSON from CC? At the moment I think I might just write my own code to do this, but wanted to check first. Or go down the XML route.

Second Peter’s remark about exporting center- and right-aligned texts.

We have technical drawings. Our problem is that we need to replace some texts with localized dimensions.
The resulting text-width varies per locale.
As all text-blocks are converted to left-aligned, the dimensions do no longer line up well within the drawing.

Is there a way to export text-aligment to SVG, or a known work-around?

I am however having issues when converting a file that has some gradient shading. It seems like gradients are totally stripped and the image turns out looking pretty bad. Has anyone else managed to conquer the SVG gradient export from Illustrator CC yet?

Well, I am back again, this time with two questions regarding fonts and the Illustrator conversion process to SVGs. I posted these more than a month ago on the Adobe Illustrator discussion board here but no one will touch them.

I want Illustrator to preserve at least one “backup” alternative font in case the one I pick isn’t available on someone else’s browser (i.e., I want it to generate font-family=”DejavuSans”, sans-serif), and I want to preserve my font sizes using the em scale rather than the point scale (e.g., font-size=3em rather than font-size=42px). Near as I can tell, Illustrator won’t do either of those things. Please tell me I am wrong…?