SVG Embedded In-Line In XHTML
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 website, not from the individual SVGs on this specific webpage).
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.