SVG in XHTML
This work is licensed under the Creative Commons Attribution Non-Commercial 2.0 UK: England & Wales Licence. This means that you are free to: copy; distribute; and modify this work. It also means that you cannot use it for commercial purposes. Additionally, you must attribute this work to the original author, Thomas Guymer, ideally with a link.
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. It should also validate correctly using the W3C Validator. This page should be served as application/xhtml+xml unless you're using flawed software, such as IE, which'll be sent text/html. IE cannot accept application/xhtml+xml, period.
Below are the two methods.
SVG inline with svg:svg
This example is not animated. It requires the following code in the <html> tag:
...and the following code in the <body> section:
<svg:circle cx="50" cy="50" r="50" style="fill:rgb(224,224,224);" />
</svg:svg>
SVG embedded with object
This example is animated. It uses the following code in the <body> section:
<param name="src" value="clock.svg">
<p>There appears to be a problem. If you are an Internet Explorer user try installing the <a href="http://www.adobe.com/svg/viewer/install/" title="Adobe SVG Viewer">Adobe <abbr title="Scalable Vector Graphics">SVG</abbr> Viewer</a>, else check out <a href="http://browsehappy.com/browsers/" title="Browse Happy's Recommended Browsers">Browse Happy's List of Recommended Browsers</a> so you can switch to a more capable web browser.</p>
</object>
Browser Profiling
Additionally, some PHP runs to see if your browser is capable of accepting application/xhtml+xml. If it can, then it sends the browser that mime-type otherwise PHP tells the browser that the page is text/html. This should help it be displayed in IE too. The PHP code is shown below:
if(strpos($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml") !== false) {
header("Content-type: application/xhtml+xml; charset=utf-8");
}
else {
header("Content-type: text/html; charset=utf-8");
}
?>
Here is that data retrieved from the PHP code - you can't control what is shown here. It is just useful to help identify if your browser should render this page without issues.
You can check this data to see if your current UA supports the mime-type application/xhtml+xml. If it does then chances are that this page is working for you, that the SVGs are displayed and that you weren't prompted to download this page (instead of just viewing it), such as this IE prompt:
I congratulate you on a good choice of web browser, or my thorough coding skills ;) If it doesn't then this page has had to fall back to the text/html mime-type.
Doing my own tests I have found that:
| Browser | Accepts application/xhtml+xml? |
Renders inline SVG? | Renders embeded 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 |
So, this clearly shows that if you want a decent browser then choose either Firefox, Opera or Safari. Incidently, 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 inline SVG. Konqueror used to have such high standards and such ardent followers - Safari is even based on the Konqueror engine. Still, Konqueror is way better than IE in all other areas though.
Do you want to say 
