Creating SVG vector graphics for maximum browser compatibility
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.
No problems so far. The SVG looks good in all modern browsers.
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.
We need to find another way to create the screen because of the poor support with Webkit browsers.
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.
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.
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.
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.
How it should be
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.
|Stylize > Drop Shadow *|
|Blur > Gaussian Blur *|
|Stylize > Outer Glow *|
|Stylize > Inner Glow *|
|Gradient mesh *|
|SVG Filters > Shadow|
|SVG Filters > Gaussian Blur|
Effects with an asterisk (*) are exported as embedded bitmaps by Adobe Illustrator. These are not desirable as the SVG loses resolution independence.
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.
- 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)
- 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:
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.
Some missing features are intentional. Firefox contributor Robert Longson shared with us that the reason Firefox does not support linked images inside SVG graphics is to avoid misuse.