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.
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.
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.
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.
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.
|Blur gaussian blur|
|Stylize outer glow|
|Stylize inner glow|
|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.
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.
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.
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.
Added new browsers to comparison table.