Hands-On SVG Tutorial Using XML and XSLT

My objective in this tutorial is to display XML vehicle track data overlaid onto graphic imagery using XSLT to transform the XML into HTML and SVG. I will start off with baby steps in SVG and XSLT as I am learning this while writing this tutorial.

Step 2) Embed some SVG in an HTML page.

As of this writing the browser that I use (Mozilla Family of Browsers) doesn't support typing SVG straight into an HTML document as far as I know (you might want to check www.mozilla.org to make sure, maybe I'm just behind the times already). To get the SVG into the HTML we have to use the "embed" tag.

Step 3) Convert some XML into HTML via XSLT.

Some things to note about the XSL.. The "xsl:output method="html" is important if your output is to be html, which ours is. Also, inside the XSL document you have to properly end all html tags.. where you would normally put <br> you now need to put <br/> etc.

To see this example at work (on Linux) I run "xsltproc tracks.xsl tracks.xml" at the command prompt. The html output then appears in the console. To see it in a web browser you need to redirect the output to a file like so.. "xsltproc tracks.xsl tracks.xml > output.html" and the open the output.html in you favorite browser. Windows users need to check out Micro$oft's MSXML parser command line stuff.

Summary)

When browsers become more SVG capable I'll add a new section that shows how to produce HTML with SVG tags actually in the document, but until then this method will have to do. I hope to add another section where I make some SOAP requests for the imagery and track data when time allows. Any questions or comments can be mailed to duane_odom (at) yahoo (dot) com.