Valid XHTML Icon Valid CSS Icon Valid SVG Icon Unicode UTF-8 Icon
Add to del.icio.us Digg this! Post to reddit Share on Facebook Add to StumbleUpon Add to Google Bookmarks

SVG in XHTML

Creative Commons LogoThis 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:

xmlns:svg="http://www.w3.org/2000/svg"

...and the following code in the <body> section:

<svg:svg width="100" height="100">
    <svg:circle cx="50" cy="50" r="50" style="fill:rgb(224,224,224);" />
</svg:svg>

SVG embedded with object

There appears to be a problem. If you are an Internet Explorer user try installing the Adobe SVG Viewer, else check out Browse Happy's List of Recommended Browsers so you can switch to a more capable web browser.

This example is animated. It uses the following code in the <body> section:

<object type="image/svg+xml" data="clock.svg" width="100" height="100">
    <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&apos;s Recommended Browsers">Browse Happy&apos;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:

<?php
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");
}
?>

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:

Internet Explorer Download 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.

This page was last modified on 20/09/2015.

The Unfriendly Web

Map of total firewall denials on my servers

Update (September 2015)

This site has changed quite a lot since I bought the domain in November 2005 and first started hosting my own content. During that time the internet has evolved an awful lot; as I write this in 2015 it is almost unrecognisable to what it once was. Gone are the days of hosting your own photo albums from your holidays on your own website: now you create an album on Facebook to share with your friends and family. Got some special photos that you are particularly proud of? Then deviantART or Flickr are the places for you to showcase them. Found an interesting page and wish to share it with your friends? Twitter and Facebook will update them immediately wherever they are. Written some pieces of source code that you think other people might find useful? GitHub will version track and syntax highlight it in an instant.

Consequently, this site no longer has photo albums and panoramas taken from my travels: the special ones are in my deviantART gallery and the normal ones are on my private Facebook page. I don't have a WordPress blog at the minute so I will still keep my articles on fixing technological problems ("Releases" and "Tutorials") on here for archival - if they're useful to you then that's great. If I ever restart publishing code it'll be on my GitHub page.

I have learned a lot since I first started writing (non-public) web pages in 2002. As testimony, this site: does not set any cookies; barely has any JavaScript on it; and is no longer dynamically generated using PHP. Rather, it is completely static with updates propagated using make every midnight thanks to cron.

© 2002-2017 Thomas Guymer. See the Copyright Statement.