Export SVG For The Web With Illustrator CC - Creative Droplets

Export SVG for the web with Illustrator CC | Creative droplets 12/02/2018, 12(01
Home About me Blog
Export SVG for the web with

Illustrator CC
Posted by Michael Chaize on Jul 19, 2013 in Blog | 45
comments
Home Blog Export SVG for the web with Illustrator CC
About the author
Michaël Chaize is a Senior

Creative Cloud Evangelist at
Adobe. Feel free to contact him
via twitter and follow his videos
on Youtube.
History Search on this blog
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 Search for:
Viewer is a very advanced plugin that supports most of the SVG specification. However, Search
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 Recent Posts
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 Adobe Muse Tips: Fading
http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ Page 1 of 23
naturally scale and are usually small and automatically compressed by web HTTP servers rollovers on images
(using automatic gzip compression).
Adobe Muse Tips: Add a
Adobe Illustrator CC is the software of choice for designing vector graphics. In this post, shopping cart with Paypal
I’ll cover the best export options to produce quality SVG files for your websites, with the
Adobe Muse Tips: Share on
smallest file size possible.
Facebook
Adobe Muse Tips: Video
Illustrator and SVG background
Top features of Photoshop

In Illustrator CC (and CS6), you have several ways to export images from the vector shapes
CC for Web Designers
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. Social
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:
EMBED
1 <?xml version="1.0" encoding="utf-8"?>

2 
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/
1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="homeElementChalk" xmlns="http://www.w3.org/2000/svg" xml
ns:xlink="http://www.w3.org/1999/xlink" x="0px"
5 y="0px" width="105px" height="102px" viewBox="0 0 105 102" enable-backgrou
nd="new 0 0 105 102" xml:space="preserve">
6 <circle fill="#D86E27" cx="36" cy="36" r="36"/>
7 <image overflow="visible" width="480" height="468" xlink:href="data:image/png;b
ase64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHUCAYAAADiP/suAAAACXBIWXMAAAsTAAALEwEAmpwYA
AA4
8 IGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0w
9 TXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRh
10 LyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEz
11 LTEyOjA5OjE1ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMu
12 b3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJk
13 ZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFw
14 LzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMv
15 (…)
16 9gBgdAY4OAztC/jCj1BnDwBGB4Bjw9DOAC/8CHX2AGA4PpwahnYGfOFLqLNjAMPR0YlhaGeAF76E
17 OnsCMJwcHRiGtgZ84U+os3f7/wMAXxYhzahZKn4AAAAASUVORK5CYII=" transform="matrix(0.1
501 0 0 0.1501 32.94 31.7415)">
18 </image>
19 </svg>
LINK
1 <?xml version="1.0" encoding="utf-8"?>

2 
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1
.1/DTD/svg11.dtd">
4 <svg version="1.1" id="homeElementChalk" xmlns="http://www.w3.org/2000/svg" xmln
s:xlink="http://www.w3.org/1999/xlink" x="0px"
5 y="0px" width="105px" height="102px" viewBox="0 0 105 102" enable-backgroun
d="new 0 0 105 102" xml:space="preserve">
6 <circle fill="#D86E27" cx="36" cy="36" r="36"/>
7 <image overflow="visible" width="480" height="468" xlink:href="../../../../../..
/../../Users/mchaize/Pictures/CC_Materials/CC_mnemonics/CC_mnemonics_PNG/Ai_CC_m
nemonic.png" transform="matrix(0.1501 0 0 0.1501 32.94 31.7415)">
8 </image>
9 </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.
Here is the code exported with a decimal places setting of “7”.
1 <path fill="#F28E85" d="M31,94.6236572C31,47.644043,65.2392578,8.6680908,110.123

6572,1.270813 C105.0795288,0.4395142,99.9032593,0,94.6236572,0C42.3644409,0,0,42
.3644409,0,94.6236572 c0,52.2591553,42.3644409,94.6236572,94.6236572,94.6236572c
5.2796021,0,10.4558716-0.4395142,15.5-1.270813 C65.2392578,180.5792236,31,141.60
32104,31,94.6236572z"/>
Same shape, with a decimal places setting of “1”
1 <path fill="#F28E85" d="M31,94.6c0-47,34.2-86,79.1-93.4C105.1,0.4,99.9,0,94.6,0C

42.4,0,0,42.4,0,94.6c0,52.3,42.4,94.6,94.6,94.6 c5.3,0,10.5-0.4,15.5-1.3C65.2,18
0.6,31,141.6,31,94.6z"/>
Naturally, the first export produces more precise vector coordinates. But SVG is very verbose,
and generating 7 decimal numbers will produce heavy files.
This setting theoretically affects the quality of your graphics, but can you really see the
difference? Let’s try with a more complex SVG, the portrait of Napoleon.
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.
Let’s compare the final SVG files:
Click on the image to try this sample
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:
1 <tspan x="0" y="0" font-family="'Myriad-Roman'" font-size="136.1154" letter-spac
ing="-1">A</tspan><tspan x="81.7" y="0" font-family="'Myriad-Roman'" font-size="

136.1154">dobe</tspan>
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:
1 <text transform="matrix(1 0 0 1 36.5907 137.4181)" font-family="'Myriad-Roman'"

font-size="136.1154">Adobe</text>
It reduces the size of the SVG and if you plan to dynamically modify the text thanks to
JavaScript code, it will be easier.
“Use <textPath> element for Text on path”
Same as above, my advice is to leverage the <textPath> SVG element, so check this box.
Otherwise, it will declare one <tspan> per character.
The code is cleaner with <textpath>
1 <path id="SVGID_x5F_1_x5F_" fill="none" d="M38.7,308.5c0,0,58.1-234.4,179.6-160.

2s138.7,89.2,202.2,2.2S623.7,59,623.7,59"/>
2 <text><textPath xlink:href="#SVGID_x5F_1_x5F_" startOffset="5%">
3 <tspan font-family="'MyriadPro-Regular'" font-size="23">A fool thinks himself t
o be wise, but a wise man knows himself to be a fool.</tspan></textPath>
4 </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:
1 <style type="text/css">
2 .sandStyle{fill:#BFAF8F;stroke:#A6806A;stroke-width:3;stroke-miterlimit:10;
}
3 .blueSky{fill:#338AC4;stroke:#3469B7;stroke-width:3;stroke-miterlimit:10;}
4 </style>
5 <g id="mySquare">
6 <rect x="90.5" y="15.5" class="sandStyle" width="64" height="63"/>
7 </g>
8 <g id="myCircle">
9 <circle class="sandStyle" cx="42" cy="46" r="34.2"/>
10 </g>
The code is well structured and you can easily modify your styles afterwards or dynamically
apply new styles to your elements using JavaScript. Notice the name of the layers “mySquare”
and “myCircle” correctly preserved in the SVG. If you want to play with this sample in your
browser, click here.
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!
Related Posts
HTML5 animations and Generate SVG with Typekit, Photoshop CC &

SVG Photoshop CC Web Design
HTML5 and Multitouch – Transparent PNG with Adobe apps and Web
Hammer.js Illustrator Design
45 Comments
Ammar Midani July 22, 2013

Thank you for talking SVG in this mobile devices time.
Reply
Charlie July 23, 2013
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.
Reply
Michael Chaize July 24, 2013

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).
Reply
Charlie July 24, 2013

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.
Reply
Jason Post July 25, 2013

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!
Reply
Kemal Yilmaz July 26, 2013

Thank for your sharing.
How can we give a name to an element in CS6 ?
And how can we access to this element from javascript ?
Reply
Michael Chaize July 26, 2013

You can give a name to an element in CC naming your layer. You’ll
get one element per layer. I don’t know if this feature exists in CS6. I
guess so.
Reply
Toby Hallam May 16, 2014

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.
Reply
Joe McGill July 30, 2013

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.
Reply
Antonio Bustamante January 24, 2014

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.
Reply
ruizfrontend July 31, 2013

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
Reply
Johan August 28, 2013

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?
Reply
Michael Chaize August 28, 2013

Hi @Johan, no there is no point. Apache will handle it for you
Reply
Ann August 28, 2013

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?
Reply
Ann August 28, 2013
Apologies, my above question relates to CS5.
Reply
Jason "J-Ryze" Fonceca September 5, 2013

Super helpful stuff on a relatively new format. Thank you so much
Reply
Kirby September 8, 2013

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!
Reply
Michael Chaize September 8, 2013

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.
Reply
Dan September 16, 2013

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?
Reply
Dan September 17, 2013

I’ve uploaded a demo highlighting the problem. The AI file and
exported SVG can be downloaded as a zip file here
(http://thunklabs.com/tmp/AI_SVG_Error/AI_SVG_Error.zip)
Or to view the difference between AI and SVG I’ve uploaded 2 png
images:
The original AI file (http://thunklabs.com/tmp/AI_SVG_Error/AI.png)
The exported SVG file
(http://thunklabs.com/tmp/AI_SVG_Error/SVG.png)
Notice that the thresholds are relative to the font size – the 12pt font
does not switch over between 41 and 42 but the 24pt font does.
Reply
Michael Chaize September 18, 2013

Thanks Dan. I send your sample to the team.
Reply
Larry Botha September 26, 2013

This is awesome – I didn’t know that layer names were preserved as id’s, which is
awesome for JS hooks.
My only gripe is that AI CS6 will strip classes defined outside of illustrator.
Externally declared ID’s are preserved when saving in AI.
Reply
Valentijn Kint November 3, 2013

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?
Reply
Gary October 30, 2014

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_
And the more you duplicate stuff, the crazierit gets
Very annoying!
Reply
Rutger October 24, 2013

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.
Any experience on that? Your reply will be appreciated!
Reply
Kieran November 5, 2013

Great write up Michael, I’ve dabbled a fair bit with SVG for web, but didn’t really
understand the parameters… Until now
Invaluable information + Great blog
Thanks
Reply
Kieran November 5, 2013

A great post, I’ve dabbled with SVG exporting for web but never really
understood the parameters… Until now!
Thanks
Reply
Flo November 15, 2013

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:
.testStyle{fill:url(#SVGID_1_);} //my class with a useless gradient

.st0{fill:url(#testrect_1_);} // class generated by illustrator
// useless gradient with no height?!
// correct gradient
// rectangle which should have .testStyle on it
————————————
In a correct way, it should be:
.testStyle{fill:url(#testrect_1_);}
// correct gradient
When i change the code by myself, it works properly. But it’s actually
no option to change every svg by hand…
Do you have any ideas what’s happening there and how to possibly
avoid it?!
Thanks in advance,
Flo
Reply
Dave November 30, 2013

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!
Reply
Peter January 28, 2014

Hi Mickael,
I’m facing a problem with the TextField properties, specially the text-align one.
Is there any way to export text-alignment property in svg file ? (right, or
centered).
Thank you for sharing your experience !
P.
Reply
Sam February 8, 2014

Thanks for the guide.
Reply
Nikola April 1, 2014

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!
Reply
Sergey Basharov April 2, 2014
How can I export circles not as but as ? I want to do some tween animation after
export using JavaScript so I need paths to be used.
Reply
joone April 29, 2014

Hey okay this is a weird question.
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.
Reply
Wolffen May 30, 2014

(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?
Thank you for the very helpful article.
Reply
Mark Baynes June 5, 2014

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.
Again thanks for the article.
cheers, Mark
Reply
OneTwo June 16, 2014

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?
Reply
Rien June 18, 2014

Thanks very much, the tutorial help me create some best optimization SVG file
for web! great post!
Reply
Olivier June 30, 2014

Hi
Thank you for these very interesting informations.
I would like to extract x, y coordinates from complex svg file.
Does illustrator allow this?
Any help would be appreciated .
Thanks
Best
Olivier
Reply
Ryan October 23, 2014

When I save a graphic on the canvas in illustrator to svg and open it again in
illustrator it appears off the canvas.
Reply
Ryan October 23, 2014

When I save a graphic on the canvas in illustrator to svg and open it again in
illustrator it appears off the canvas.
Does anyone know why this would happen?
Thanks
Reply
Okibi November 4, 2014

The biggest issue I have in Firefox is bold fonts because Illustrator exports the
SVG bold font as FontFaceName-Bold ie. “font-family=”‘Calibri-Bold'”
To fix this I open each SVG in a text editor and find and replace the -Bold with a
font weight.
In this example font-family=”‘Calibri-Bold'” becomes
font-family=”‘Calibri'” font-weight=”‘bold'”
Reply
Zlatko November 11, 2014
I design web icons and these settings are exactly what I needed for the SVG
export I do. Very helpful and extensive article.
Reply
Freedom Studios May 19, 2015

Great comprehensive article which a found very helpful indeed.
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?
Reply
Kirby July 29, 2015

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…?
Reply
Trackbacks/Pingbacks
Best of JavaScript, HTML & CSS – Week of July 15, 2013 | Flippin' Awesome - [...] Michael
Chaize covers the best export options in Illustrator that produce quality SVG files with the
smallest file size…
Exportar SVG | DSÑ + IEO * GRFC + ÁIO - [...] dejar por defecto todos los valores hasta que el
otro día me encontré con este artículo Export SVG for…
SVG-изображения: используем векторную графику в веб-дизайне - […] Болеее подробно
про экспорт SVG из Adobe Illustrator версий CS6 и CC можно прочитать на блоге
creativedroplets.com. […]
Sử dụng định dạng SVG cho ứng dụng web của bạn | Sentudio.Com - […] will present you an
SVG options dialog. There’s a really complete guide for these settings on Creative Droplets
but…
Live blog 25 years of Adobe Illustrator in Amsterdam AUGNL » Clasener - […] Creating svg files
for the web is extremely powerful, once done correctly. Check out Michael’s blog. […]
VirtuallyGeeky's Blog | Retina display goodness… ruined by low res images on the web - […]
earlier than IE9 on a Windows PC, but I suppose only time (and stats) will tell. It looks like…
A Compendium of SVG Information | Lunarium Design - […] Exporting SVG for the web with
Adobe Illustrator CC by Michaël Chaize […]
The Best SVG Tutorials and TechniquesFree Internet Tutorials | Free Internet Tutorials - […]
View Tutorial […]
Styling And Animating SVGs With CSS | Smashing Magazine - […] The reasons why the options
above are best are explained in Michaël Chaize’s excellent article “Export SVG for the…
Styling And Animating SVGs With CSS - rehavaPress - […] The reasons why the options above
are best are explained in Michaël Chaize’s excellent article “Export SVG for the…
Styling And Animating SVGs With CSS | Bastudio - […] The reasons why the options above are
best are explained in Michaël Chaize's excellent article “Export SVG for the…
Styling And Animating SVGs With CSS - Sacked Articles | Sacked Articles - […] The reasons why
the options above are best are explained in Michaël Chaize’s excellent article “Export SVG for
the…
Styling And Animating SVGs With CSS | endlessness - […] The reasons why the options above
are best are explained in Michaël Chaize’s excellent article “Export SVG for the…
Styling And Animating SVGs With CSS - InfoLogs - […] The reasons why the options above are
best are explained in Michaël Chaize’s excellent article “Export SVG for the…
SVG с помощью CSS - Часть 1 - Zencoder - […] Почему представленный выбор настроек
является наилучшим, рассказано Michaël Chaize в прекрасной статье Export SVG for the
Web With Illustrator…
Submit a Comment
Your email address will not be published. Required fields are marked *
Comment
Name *
Email *
Website
Submit
Social
Designed by Elegant Themes | Powered by WordPress

Export SVG For The Web With Illustrator CC - Creative Droplets

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Export SVG For The Web With Illustrator CC - Creative Droplets

Caricato da

Copyright:

Formati disponibili

Export SVG for the web with Illustrator CC | Creative droplets 12/02/2018, 12(01

Home About me Blog

Export SVG for the web with

Home Blog Export SVG for the web with Illustrator CC

About the author

Michaël Chaize is a Senior

History Search on this blog

Adobe Muse Tips: Video

Illustrator and SVG background

Top features of Photoshop

File > Save As… SVG ﬁle.

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

The best export options for the web

Proﬁle: SVG 1.1

For more details on these settings, continue reading.

SVG 1.1? SVG Tiny? SVG Basic?

The SVG proﬁles

Fonts – Type and subsetting

How to embed fonts

Options for images

1 <?xml version="1.0" encoding="utf-8"?>

1 <?xml version="1.0" encoding="utf-8"?>

Options – Preserve Illustrator capabilities

If you check “Preserve Illustrator capabilities”: 407Kb

More options – Optimization gems

Click on More options

Let’s start with maths:

Here is the code exported with a decimal places setting of “7”.

1 <path fill="#F28E85" d="M31,94.6236572C31,47.644043,65.2392578,8.6680908,110.123

Same shape, with a decimal places setting of “1”

1 <path fill="#F28E85" d="M31,94.6c0-47,34.2-86,79.1-93.4C105.1,0.4,99.9,0,94.6,0C

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

Optimize your artworks reducing the number of vectors

Object > Path > Simplify

Let’s compare the ﬁnal SVG ﬁles:

Click on the image to try this sample

The Pencil tool

More options for web designers

More options for web designers

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

“Include XMP” : If you’re working in a super-organized environment, with automated

“Output fewer <tspan> elements”:

1 <tspan x="0" y="0" font-family="'Myriad-Roman'" font-size="136.1154" letter-spac

ing="-1">A</tspan><tspan x="81.7" y="0" font-family="'Myriad-Roman'" font-size="

1 <text transform="matrix(1 0 0 1 36.5907 137.4181)" font-family="'Myriad-Roman'"

“Use <textPath> element for Text on path”

The code is cleaner with <textpath>

1 <path id="SVGID_x5F_1_x5F_" fill="none" d="M38.7,308.5c0,0,58.1-234.4,179.6-160.

CSS Properties and graphic styles

Select style elements

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

Name your Graphic Styles

Unused Graphic Styles

HTML5 animations and Generate SVG with Typekit, Photoshop CC &

Ammar Midani July 22, 2013

Charlie July 23, 2013

Michael Chaize July 24, 2013

Charlie July 24, 2013

Any idea how responsive the team is to feedback? This

Jason Post July 25, 2013

Kemal Yilmaz July 26, 2013

Michael Chaize July 26, 2013

Toby Hallam May 16, 2014