5 Tips for Saving SVG for the Web with Illustrator

Solomon Hawk, Senior Developer

Posted on February 3, 2016

A s h o r t l i s t o f t i p s f o r a v o i d i n g c o m m o n p r o b l e m s w i t h e x p o r t e d S V G .

Authoring SVGs in Illustrator is easy. Authoring an SVG in Illustrator and then properly exporting it for the web can be... tricky. Here's a short list of tips for avoiding common problems with exported SVG.

1. Verify Shape Combinations Support Use Cases (path construction)

Use your love of the pathfinder tool to craft clean paths and shapes. When combining shapes together, consider which shapes a developer may need to independently apply styles or animations to. A hole should be a hole, not a solid shape colored the same as the background.

2. Align All Shapes to Pixel Grid (path alignment)

Remember, despite the fact that Illustrator lets you author vector graphics, you are often designing for screens which are made of pixels. When working with icons, fine lines or crisp geometries, careful consideration should be taken to ensure alignment with a pixel grid based on expected display size.

See note below for more guidance from one of our Art Directors Mindy Wagner.

3. Choose the Correct Image and Font Settings (export optimization)

Inaccurate settings for these properties can lead to bloated file sizes, broken images, or weird cross-browser bugs with text rendering.

Images: (only matters if SVG has images)

Embed**: actually stores the rasterized image data inside the .svg file as data URI (increasing filesize)
Link: references an external image (useful if several SVGs reference the same raster image to reduce extra bytes transferred) [important: by default Illustrator will use a relative path to the file on your harddrive, someone will be required to modify that url by hand to point to the actual online resource]

Type: (only matters if SVG has text)

SVG: embeds fonts as SVG
Subsetting: include all or part of a font (only useful if text might change, e.g. in response to user input)
Only Glyphs Used**: only includes the glyphs used in the SVG (reduces filesize bloat)
Convert to Outline**: converts all text to paths - avoid if SVG has a lot of text (prefer embed WOFF)

4. Expand All the Strokes (output consistency)

Expanding strokes to paths is commonly known to improve consistency of appearance across browsers and also provides the greatest level of flexibility for developers.

5. Use Appropriate CSS Properties Setting (dev happiness)

This option can be confusing, so let's break it down:

Presentation Attributes**:

visual styles applied as SVG attributes on each shape <path fill="#f00"></path>
allows for the most flexibility for specific edits and transformations
best when using SVG inline and adding styles with CSS

Style Attributes (Entity Reference):

visual styles defined as ENTITY refs and referenced in a style attribute on each shape <path style="&st0;"></path>
doesn't render correctly in some browsers

Style Attributes:

visual styles applied as a style attribute on each shape <path style="fill: #f00;"></path>
may increase file size

Style Elements:

style tag embedded in SVG with classNames <style>.st0 { ... }</style> <path class="st0"></path>
easiest to edit for developers
may increase file size

** Recommended Setting

Note there are some differences between how CS6 and CC treat CSS Properties generated as "Style Elements":

CS6: illustrator assigns weird classNames such as st0, st1 (dumb)

CC: illustrator uses the defined Graphical Styles to create named classes (smart, useful)

Reference: http://articles.dappergentlemen.com/2014/12/17/demystifying-illustrator-svg-css/

Tips

(!) Name groups/layers to get better html output from Illustrator (groups/shapes receive ID's based on layer/group name).
Break apart design into logical layers based on entities (as opposed to colors).
Preserve Illustrator Editing Capabilities: no... never.

Working with Pixel Alignment (PSCC)

Bring up the transform panel, which has an "align to pixel grid" option. That should be checked before starting a new document. If that hasn't been checked, you can select the object and then check the box to align the objects. If you don't know for sure everything is aligned, you can go to Select > Object > Not Aligned To Pixel Grid and it will select any object that isn't aligned properly (and then you can hit "Align to Pixel Grid in the transform panel to fix all!)