« Corel Painter 12 Announced | Main | Interlude: "Partitura 001" by Abstract Birds »
Monday
May092011

Inline SVG Rendering comparison revisited – Chrome, Firefox, and Internet Explorer

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

image

Firefox

image
Internet Explorer

image
     

 

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 image
Firefox image
Internet Explorer

image

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 image
Firefox image
Internet Explorer

image

 

 

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 image
Firefox image
Internet Explorer

image

 

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 image
Firefox image
Internet Explorer

image

 

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 image
Firefox image
Internet Explorer

image

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (2)

The problem I have in Chrome is that there is too much room BEFORE and AFTER the SVG image. Any idea why?

March 29, 2013 | Unregistered CommenterDario de Judicibus

@Dario - Can you email me sample of your HTML that contains the SVG? I'd like to take a look at it to see what might be causing the spacing issue that you re seeing.

March 29, 2013 | Registered Commentersaveenr

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>