Software: Basic Inline SVG At Last!

It seemed like such a simple task: put some SVG code into an XHTML document on my hobby web site. I managed to do it but it required jumping through several hoops. The best source of information on inline SVG can be found in this Wiki article. Here's some extra gotchas that I found while developing this simple page. Note that I'm using Firefox 1.5, IE6.0, ASV 3.03 and Windows XP Professional SP2.

Create your XHTML + SVG document

Follow the Wiki article and create an XHTML document (one with DOCTYPE and the required namespaces) and insert your SVG fragment with its own namespace. Save your file with a .xhtml extension.

The .xhtml extension is required otherwise Firefox will load your file in HTML standards compliance mode and you will not see any SVG image at all. On the other hand, if you use the .xhtml extension and try to open that file in IE6.0, IE6.0 will show the XML tree view! In the end, I stuck with the .xhtml extension because there's a web server workaround (see the Wiki article) and made a copy with a .html extension for testing with IE6.0.

Add special tags for IE6.0

The extra <object> tag and <?import?> processing instructions tell IE6.0 to use ASV for the svg namespace elements. The only gotcha is that IE6.0 leaves a blank space for the tag and processing instruction.

Add web server support

Fortunately, my hobby site is running on an Apache server, so it was easy to add the required changes to the .htaccess file.

Finally …

After spending some hours setting things up and working through the gotchas, I finally got a simple draft page on my hobby site. It isn't much to see at the moment, just a yellow disk. Still, it's a start!