Test page date: 2012-04-11

SVG — testing scalability (XHTML version)

Browser: CCBot/2.0 (https://commoncrawl.org/faq/)

Object SVG, scaled down

Object SVG, preserveAspectRatio

Object SVG, scaled up

Object SVG, free size

Object SVG, free preserveAsp.

<img>, scaled down


<img>, preserveAspectRatio


<img>, scaled up


<img>, free size


<img>, free preserveAsp.


inline svg, scaled down

inline svg, preserveAspectRatio

inline svg, scaled up

inline svg, free size

inline svg, free preserveAsp.

About this test:

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.

Results in different browsers:

Iceweasel (Firefox) 3.5


no SVG in <img> yet

Firefox 11


inline SVG regression?

Internet Explorer 9

Internet Explorer

10 out of 15

Apple Safari 5.1


Only <img> works, so no links

WebKit nightly


like Chrome, better on <img>

Chromium (Google Chrome)


<object> works mostly, <img> broken

Opera 11


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.