Jeni's XSLT Utilities: SVG Utility Copyright (c) 2000 Dr Jeni Tennison. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License".

SVG Utility

The SVG utility is designed to help you to embed the SVG images that you generate using XSLT into an HTML page.

Creating SVG with XSLT is very cool. Unfortunately, it's difficult to generate HTML pages that use SVG because the embed elements that are used to host SVG refer to separate files rather than allowing SVG within them. However, you can get around this by loading the SVG into the embed through a script, using Chris Bayes' domtodom.js.

The crucial insight of this utility was the fact that the loading of the SVG images into the embed elements can be triggered by a script in a static SVG image. This utility creates the script and the embed elements for the page.

Instructions

  1. Download and unzip it into the same directory as your stylesheet. It contains three files:
    • svg-utils.xsl - the utility stylesheet
    • domtodom.js - Chris Bayes' script
    • blank.svg - a blank SVG set up to trigger the loading of the images into the page

  2. Import the svg-utils.xsl stylesheet into your stylesheet:

    <xsl:import href="svg-utils.xsl" />

  3. Create a variable holding a node set within which each node represents a separate image to be placed in the document (I call these image nodes).

    <xsl:variable name="images" select="document('')/*/my:diagrams/my:diagram" />

  4. Within the head element of the HTML, call the template 'insertSVGScript' with the images parameter being the node set of image nodes:

    SVG Chart Demonstration ]]>

  5. Add templates in 'getSVG' mode that match the image nodes. These templates should return SVG images.

    ... ... ]]>

  6. Apply templates to the image nodes in 'createEmbed' mode to create embed elements for the at the relevant points in the HTML.

    ]]>

There are a few extra options that you can set as parameters for the 'createEmbed' template, namely:

src blank.svg The name of the blank SVG file to be used in place while the SVG images are loaded. These should all contain a call to the function triggerSVGLoading(). Have a look at the source of blank.svg for an example. width The desired width of the embed. height The desired height of the embed.

More Information

A Simple Example