SVG Embedded In-Line In XHTML

metadata
  • keywords:
    • software
    • html
    • svg
    • xhtml
  • published:
  • updated:
  • Atom Feed

This page intends to outline the different ways in which SVG can be implemented in XHTML pages and the drawbacks associated with each method - namely IE. This page should also validate correctly using the W3C Validator. This page is served with the MIME type of application/xhtml+xml. Below are the two methods (in both methods please note that the white background comes from the overall CSS style of my web site, not from the individual SVGs on this specific web page).

SVG in-line with svg:svg

This example is not animated. If you look at the source code for this page you will see that I have defined xmlns:svg in the html tag at the very top of the page and you will also see the in-line svg:svg tag that contains the grey circle.

SVG out-of-line with object

This example is animated. It does not require the use of the application/xhtml+xml MIME type, nor does it require the addition of the xmlns:svg attribute in the html tag at the very top of the page.

Browser Results

Doing my own tests I have found that:

Browser Accepts application/xhtml+xml? Renders in-line SVG? Renders out-of-line SVG?
Firefox 3 Yes Yes Yes
IE7 No No Yes
IE8 Beta 2 No No Yes
Konqueror 3.5 No No Yes
Opera 9.5 Yes Yes Yes
Safari 3.1 Yes Yes Yes

This clearly shows that if you want a decent browser then choose either Firefox, Opera or Safari. Incidentally, these are exactly the same browsers which are outlined on Browse Happy - the Mozilla Suite is the same as Firefox really and has now moved to be called SeaMonkey.

I am surprised that Konqueror doesn’t do any better, even when I over-ride the PHP code and send the page as application/xhtml+xml all the time, Konqueror still doesn’t render the in-line SVG. Konqueror used to have high standards and ardent followers - Safari is even based on the Konqueror engine. Still, Konqueror is way better than IE in all other areas though.