viziblr

In a post over a year ago I compared browser support for inline SVG (by embedding SVG in XHTML) and now that Internet Explorer 9 has arrived, I thought it a good opportunity to revisit how these browsers handle some simple SVG cases.

Here is a link to the file I used: Download XHTML file

Here are the screen captures of how the three browsers rendered them. Click on the thumbnails to get to the original version.

Chrome	Firefox	Internet Explorer

Version Information

• Google Chrome 11.0.696.65
• Firefox 4.0.1
• Internet Explorer 9.0.8112.16421

Overall, most of the content seemed identical – at least I could not see any difference – but in some cases there are discrepancies that are worth highlighting

Example 9 – Text Font and family Size

You can see some slight differences in the smoothness of the edges. Chrome looks the most rough, Firefox, somewhat smoother, and IE the smoothest.

Chrome
Firefox
Internet Explorer

Note the capital S. At 8x magnification you can see how strongly the edges have been anti-aliased. In Chrome also notice how strongly saturated the colors are at the edges. Firefox and IE are using much less saturated values.

Chrome
Firefox
Internet Explorer

Example 10: Text Formatting Weight and Style and Decoration

All the browsers seem very consistent. The only notable exception is the underline style is not rendered in Firefox.

Chrome
Firefox
Internet Explorer

Example 16: Gradient Fill - Controlling Transparency at the stops

Chrome “does the right thing”. It is surprising to see that Firefox and and IE don’t render this correct.

Chrome
Firefox
Internet Explorer

Example 21: Stroke Line Join - Dashes 1

Everyone seems to be doing their own thing with this kind of line style. None of them look particularly good.

Chrome
Firefox
Internet Explorer