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 HTML5 (you can also use XHTML instead).
No single configuration on this page works in all browsers, old and new. Currently using <object> in the HTML code and larger then rendered SVG dimensions with preserveAspectRatio seems to be the best choice: it works well with most older browsers (that support SVG, not e.g. IE < 9), and it is the only configuration I found to work with current WebKit Browsers (Google Chrome, and WebKit nightly). It does not work well with older WebKit browsers (or current Safari), but since both Google and Apple more or less follow an auto-update policy there should not be too many old WebKit browsers around anyway. SVG dimensions and preserveAspectRatio are only important if you also want to provide the same SVG file in an <img> tag for older WebKit browsers (doing server-side browser detection, as in my svg_embed function), otherwise you can leave them both out. Inserting SVG as an <img> can only be an option if you don't care about Firefox (Gecko) < 4, and if you don't need links inside your SVG (check the small square!). Another advantage of <object> is that you can provide a bitmap fallback for browsers that don't support SVG at all. Update: It seems like inline SVG also should allow for a fallback.
Obviously new browsers, notably Gecko which behaved differently in the past, seem to give the dimension settings in inline SVG preference over the CSS-specified 100% (of the white box which is 18% of screen width).
Sorry this is no blog with user comments. Don't hesitate to contact me if you have useful additions.
Vlado Plaga, 2012-04-11
P.S.: You can also download the php source code that this page is generated from.