Object SVG, scaled down
Object SVG, preserveAspectRatio
Object SVG, free preserveAsp.
<img>, scaled down
<img>, preserveAspectRatio
<img>, scaled up
<img>, free size
<img>, free preserveAsp.
Since July 2008 (when I initially launched my access statistics page) I have been struggling with SVG issues in my different web projects. It definitely is nice to have scalable vector graphics on the web, so that graphics can use up to a certain percentage of the page (or their parent paragraph), the width of which would depend on the browser window's width!
From the start this worked quite well in Firefox (Gecko) and in Opera. Microsoft Internet Explorer did not support any SVG until version 9 (released in 2011), so the only trouble it created was having to provide a non-svg alternative. Most problems I had with Apple Safari (or Google Chrome, i.e. WebKit): first the only way of including scalable vector graphics (i.e. without fixed dimensions) was to use <img>, but then links inside the graphics would not work. Now in 2012 somewhere between WebKit 534 (current Safari), 534+ (current webkit.org development version), and 535 (Google Chrome 18) things changed again, but not only for the better... see screenshots in the following section. This test page is valid XHTML.
Update: just using HTML5 simplifies the HTML code and seems to have more positive (e.g. IE < 9 displays the page at all) than negative (e.g. Firefox does not support inline svg) side-effects.
No single configuration on this page works in all browsers, old and new. See the newer HTML5 version for more conclusions.
Sorry this is no blog with user comments. Don't hesitate to contact me if you have useful additions.
Vlado Plaga, 2012-04-9
P.S.: You can also download my svg_embed function and the php source code that this page is generated from.