SVG Utility: Example

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

This page gives a simple example of using the SVG Utility to give a couple of charts based on some data within an HTML page. Say you had some data like:

You might want to generate a couple of SVG charts from this data - a bar chart and a line chart, for example. In this example, I use my:diagram elements in my stylesheet to determine the types of charts that I want to create:

First, I need to import the SVG utilities stylesheet into my stylesheet:

Second, I need to create a node-set variable within which there's one node per SVG image that I want to create. The nodes in this case are the my:diagram elements within the stylesheet, so I access them:

Now I need to insert the script and the embed elements into my document. I use the utility to insert the script into the head of my HTML, passing the $images variable as the value of the $images parameter:

In the body of the HTML page, I insert the embed elements by applying templates to the nodes held in the $images variable:

Finally, I need to create the SVG for the two diagrams. To use the SVG Utility, I need to do this within a template in getSVG mode:

If you have an SVG Viewer plug-in installed, you can view this example. The full stylesheet is available at .

More Information