Differences in how Browsers Render SVG

The good news about using SVG graphics on your site is that all modern browsers support them. You can use them just like images:

<img src=”svg/logo.svg” />

As backgrounds in a style:

.divstyle {
background: url(svg/logo.svg);
padding: 3px;

They also scale well, are small in size and can even be embedded as XML.

The bad news is that you need to check each browser to make sure it is rendering the image as you expect. Genolve has turned up a number of images that render differently. Here are some examples of a single SVG rendered across the major browsers (except Safari). Whichever browser is more closely following the specification is doing it “right”. That can be really tough to verify for complex images. Below are my own insights but these are amateur level at best. I’d welcome some input from an SVG expert.

Firefox v28 Chrome v34 Internet Explorer v11

Here the culprit seems to be: stroke-width=”31in” and stroke-dashoffset="5873" nobody expected values so large yet it makes an interesting effect. For the orange background, Firefox is correct looks orange to me:<stop offset="80%" stop-color="#F60" stop-opacity="1.0"></stop>
Firefox v28 Chrome v34 Internet Explorer v11

Here again we have a unexpected huge value: stroke-width=”31in” In this link I animate the stroke-width from 1 to 900. Chrome delivers the same effect as Firefox but then overshoots it.
Firefox v28 Chrome v34 Internet Explorer v11

At first this looks like a path has been mis-rendered but the mismatch is due to how the radial gradient has been centered. Too hard to call who is right.
Firefox v28 Chrome v34 Internet Explorer v11

Here when I remove: spreadMethod=”reflect” they render the same which looks like Firefox is not doing the reflect.

Comments are closed