This article describes how to design vector graphics with Adobe Illustrator and maximize SVG features while retaining browser compatibility. SVG stands for Scalable Vector Graphics. It is a resolution independent format for graphics on the web.

We use a lot of icons and logos on voormedia.com. Every portfolio and service page has at least one. Every icon is created as vector graphic as part of our quest to create a completely resolution independent website. It turned out that not every company or software library has a vector icon available, so we decided to recreate them ourselves using Adobe Illustrator CS6.

Creating a vector icon

One of the icons I created was the new icon from Final Cut Pro X. It has complex shapes, shadows and gradients. I ran into a few serious SVG compatibility problems when I started to create the icon.

The start: basic shapes

To create the icon, I designed all the basic shapes using linear gradients. SVG can handle vector shapes, gradients and strokes. It is best to outline strokes for a consistent line thickness across browsers.

Artwork How it should look SVG version Your browser Basic shapes

No problems so far. The SVG looks good in all modern browsers.

Gradient meshes

The icon features an angular gradient with a full colour spectrum. Currently SVG and Adobe Illustrator do not support angular gradients. It is possible to approximate the gradient effect with a gradient mesh. Each point of the mesh can be coloured separately to mimic the angular gradient.

The gradient mesh is a great feature for creating complex lighting and shading objects. Webkit browsers like Safari and Chrome will not show the mesh at all. Firefox 4.0 and upwards only show a pixel representation of the mesh.

Artwork How it should look SVG version Your browser Gradient mesh

We need to find another way to create the screen because of the poor support with Webkit browsers.

Embedded images

Why don't we add a high resolution image to the SVG instead? SVG allows image embedding and image linking. Embedding the image ensures that your SVG contains the images and still works if you copy or publish the file.

Firefox supports image embedding from version 4.0 and upwards. Safari 6 does not show the embedded image at first. But when you open the SVG in a new Safari browser window and come back to this page, the image is displayed correctly.

Artwork How it should look SVG version Your browser Embedded image

Because opening the SVG and reopening a page is not a workable solution, we can conclude that using gradient meshes or images are not valid options. I decided to create the screen using a linear gradient with a radial gradient from white to transparent in the center. This is not the most accurate representation, but it is the most compatible.

Gaussian blur and shadows

The icon has a distinctive shadow underneath. To create a shadow you first need a silhouette object to cast the shadow. To create the silhouette, I copied the whole icon and used Pathfinder > Unite to merge it into one object. Then I used the drop shadow filter: Effect > Stylize.

Webkit browsers do not show the drop shadow at first, but when you open the SVG in a separate window and go back to the page they do. Nobody will do such a thing, so drop shadow is out of the question.

Artwork How it should look SVG version Your browser Drop shadow

Another way to create shadows is by using Gaussian Blur. Apply the blur under Effect > SVG filter > AI Gaussian Blur 4 on the silhouette, instead of the drop shadow. You can adjust your shadow by moving the silhouette and changing its opacity.

Artwork How it should look SVG version Your browser SVG Gaussian blur

Most modern browsers show a shadow created with Gaussian blur, with the notable exception of Safari 5 and below.

SVG feature support

As shown in my case above, some crucial features used in vector graphics are not supported by web browsers or by the SVG standard itself. I decided to create a comparison table for design features. I've tested many popular functions in Adobe Illustrator designs, which I have placed in the table below.

Browser test chart

I made a test chart that I've run through all the popular browsers. All test icons are exported directly from Illustrator CS6 as SVG 1.1. You can try it out yourself and view this page in multiple browsers. Or you can use my SVG browser test page to view the tests separately.

Artwork How it should be SVG version Your browser

systemfont systemfont

customfont customfont

opacity opacity

dropshadow dropshadow

gauss. blur gauss. blur

outer glow outer glow

inner glow inner glow

img embed img embed

img link img link

warp warp

gradient gradient

radial radial

mesh mesh

opacity mask opacity mask

clip mask clip mask

blend blend

distort distort

graph graph

SVG shadow SVG shadow

SVG gauss. SVG gauss.

systemfont systemfont

customfont customfont

opacity opacity

dropshadow dropshadow

gauss. blur gauss. blur

outer glow outer glow

inner glow inner glow

img embed img embed

img link img link

warp warp

gradient gradient

radial radial

mesh mesh

opacity mask opacity mask

clip mask clip mask

blend blend

distort distort

graph graph

SVG shadow SVG shadow

SVG gauss. SVG gauss.

If you want to run a test like this in different browsers I can recommend browsershots.org.

Browser compatibility table

I visually inspected all the test results and combined them into a table. Now you can easily see which features you can use in your SVG graphics made with Adobe Illustrator.

Firefox Chrome Safari Explorer Opera 3.6 4 5 11 13 30 10 28 29 35 4 5 6 7 6 8 9 12 9 22 System fonts Custom fonts Opacity Stylize dropshadow Blur gaussian blur Stylize outer glow Stylize inner glow Embedded image Linked image Warping Linear gradient Radial gradient Gradient mesh Opacity mask Clipping mask Blend Envelope distort Graph Svg filters shadow Svg filters gaussian blur

Effects with an exclamation mark (!) are exported as embedded bitmaps by Adobe Illustrator. These are not desirable as the SVG loses resolution independence.

Summary

Creating SVG visuals using Illustrator is great for creating resolution independent detailed graphics for the web. You can create complex visuals if you know how to work around the current limitations.

Do's:

Fills and strokes (expand strokes for most consistent appearance)

Linear and radial gradients

Opacity masks and clipping masks

SVG filters such as gaussian blur and shadow (if you don't care about Safari 5 and below)

Don'ts:

Embedded or linked images

Embedded fonts

Gradient meshes

Stylize and Photoshop effects (such as outer/inner glow, drop shadow, gaussian blur)

This article describes how to create SVG illustrations. If you are interested how to detect browser support for SVG and how to include SVG files on your website, read the article: Displaying and detecting support for SVG images.

Update on October 26, 2012

Based on various comments from our readers we have updated the article to make it clear that some features of Adobe Illustrator are not supported by SVG. Illustrator will export these parts of the design as embedded images, which are not resolution independent nor supported universally.

Update on June 26, 2014

Added new browsers to comparison table.