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