Creating SVG vector graphics for maximum browser compatibility

Updated on

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

customfont

opacity

dropshadow

gauss. blur

outer glow

inner glow

img embed

img link

warp

gradient

radial

mesh

opacity mask

clip mask

blend

distort

graph

SVG shadow

SVG gauss.
System font
systemfont
Custom font
customfont
Opacity
opacity
Dropshadow
dropshadow
Gaussian blur
gauss. blur
Outer glow
outer glow
Inner glow
inner glow
Image embed
img embed
Image link
img link
Warp
warp
Gradient
gradient
Radial gradient
radial
Gradient mesh
mesh
Opacity mask
opacity mask
Clipping mask
clip mask
Blend
blend
Distort
distort
Graph
graph
Dropshadow
SVG shadow
Gaussian blur
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.

ChromeFirefoxExplorerOperaSafari
102829353.645111330689129224567
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.