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