Using XSLT and SVG together: a survey of case studies

Max Froumentin, Vincent Hardy

W3C, W3C/Sun Microsystems Inc.

2004, route des Lucioles
BP 93
Sophia Antipolis Cedex

Keywords: XSLT, Transformations


This paper describes the use of XSLT in conjunction with SVG. Various techniques and usage scenarios are presented, and the advantages of each approach are also explained, showing the benefits of combining both languages.


Session Goal

SVG has been designed for interoperability with other W3C specifications, such as XLink and CSS. In particular the XSL Transformations (XSLT) Recommendation is a valuable tool for generating SVG graphics. This paper discusses techniques that can be used to combine SVG and XSLT and illustrates them through various examples.


Part I provides an overview of the XSLT language. Originally designed for the Extensible Stylesheet Language (XSL), XSLT is now widely used as a general transformation language, which can transform any document of a given XML type into another of a different type. XML-to-HTML transformations are increasingly popular with the inclusion of XSLT processors in major Web browsers. SVG can also be generated via an XSLT transformation, providing a way to generate graphical representations of a wide range of XML data.

Part II describes popular techniques for generating SVG using an XSLT transform from XML data, producing a visual presentation of it. Examples of applications include reporting statistics from structured data via graphical charts, rendering mathematical equations from MathML content or displaying molecule diagrams from Chemical Markup Language documents. Various strategies exist for defining and applying transforms that generate SVG, which are shown here. The advantages of each approach are also explained, showing all the benefit of combining XSLT and SVG, such as the separation of concerns or the definition of constraints in a graphic.

Part III describes concrete instances where XSLT and SVG are associated, showing how XSLT can perform complex operations in a simple and concise way, and proving that it provides a valid alternative to using standard programming languages and the DOM. The first example explains how to write a transform to generate an animated board from a chess game expressed in XML format (using ChessGML). The second shows how to generate animated statistical graphs from code metrics.

Part I: XSL Overview

XSL Overview 1/2

XSL Overview 2/2

Part II: XSL and SVG, Techniques

XPath and SVG Geometry (Technique 1/3)

XPath and SVG Layout (Technique 2/3)

XPath and SVG Animation (Technique 3/3)

Tools and Techniques for combining XSL and SVG

We have seen that it can be interesting to use XSL stylesheet to express constraints, easily layout graphics and manage animation element dependencies. How can this be done in practice and where does it apply?

To apply XSL transformations, you can use a specialized software (e.g., a command line utility) which will take an XML document as an input, the XSL stylesheet to apply and will generate the result into the desired file.

For example, the Xalan software package ( comes with a command-line utility which will let you apply an XSL transformation myStylesheet.xsl to an XML file myXMLFile.xml and output the result in result.svg as follows:

xalan -in myXMLFile.xml -xsl myStylesheet.xsl -out result.svg

However, there are many environments where it is not an option to use a stand-alone software package to perform XSL transformations and where using a software library is preferable. For example, the Java programming language defines a standard API for applying transforms to XML content (the javax.xml.transform package) and this API is part of the JDK 1.4 distribution.

The following lines of code apply a transformation to a DOM Document object:

import org.w3c.dom.Document;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.Transformer;
import javax.xml.transform.dom.DOMSource;


TransformerFactory tFactory 
    = TransformerFactory.newInstance();

String stylesheetId = ...;
Transformer transformer
    = tFactory.newTransformer(new StreamSource(styleheetId));

Document doc = ...; // XML DOM to transform
    (new DOMSource(doc),
     new StreamResult(new FileOutputStream(outFileName)));

The above example is rather 'techy', but it is important to realize that the ability to integrate transformations in applications means that stylesheets can be applied in all kinds of contexts, client-side or server side. For example, it is easy to write a server component which would take a 'template' SVG stylesheet and populate it with custom information. Poscards are an example. Another example would be is a business card which can be transformed dynamically to incorporate a user's information.

A snippet of what such an stylesheet could look like:

<svg ....>
    <text ...><xsl:value-of select="user[@name]" /></text>

Part III: Demos


Code Metrics Tool

no description available

This example uses XSL techniques similar to the ones used in the ChessML demonstration. However, XML files and XSL documents where used in a slightly different way than in ChessML.

In the ChessML example, the SVG document was created by applying an XSL transformation directly to an XML source.

The Code Metrics example, comes out of the Batik open-source project where developers extract metrics from their code source. An input XML document defines the category to which each of the software component belongs. The tool generates metrics on the size of each component following a three-step process:


XSL Advantages

When it comes to generating SVG content, a number of options are possible. SVG content can be generated through the DOM API, by technologies such as PHP, CGI scripts or Active Server Pages. What are the advantages of using XSL?

First and foremost, XSL is declarative as it is itself an XML syntax. Therefore, it is a natural fit with all the other XML technologies which are so prominent today.

Second, XSL is ubiquitous in the sense that it can be applied in various contexts: client-side or server side. There is no requirement as to where the transformation applies.

Third, XSL provides an elegant way to express constraints (graphical constraints such as related element widths, layout constraints such as element positioning or time constraints such as dependencies between animation elements) easily and that is handy to generate some types of graphics (such as graphs).

In summary, XSL transformations generating SVG can be applied to simple or complex input structures and produce simple or complex SVG content.

XSL/SVG Limitations

There are a couple limitations to mention relative to the previous slide.

First, the constraints between graphical elements which can be expressed in an XSL stylesheet do not survive the transformation. Once the XSL transformation has been applied (and the constraints enforced) the constraints and no longer enforced if the SVG content changes.

For example, imagine the following XSL snippet:

<rect x="{$precedingRectX + 30}" y="..." ... />

which could produce an SVG with the following rectangles:

<rect x="0" y="..." .... />
<rect x="30" y="..." ... />
<rect x="60" y="..." ... />

The rectangles at the x position '30' was originally constrained by the position of the first rectangle. Similarly, the rectangle at position '60' was constrained by the second rectangle. However, modifying the position of the first rectangle through scripting (e.g., setting the first rectangle's x attribute to '20') will not contrain the x attributes on the second and consequently third rectangles to change (i.e., they will not become '50' and '70' respectively).

A second limitation to the XSL and SVG 1.0 combination is related to text flow. SVG 1.0 does not flow text and this is a problem for XSL transformations which deal with arbitrary text for which it is difficult to compute flow. Line-breaking is a very difficult issue that is not easily (or not properly) solved by XSL transformations. The SVG working group has recognized that offering a solution to flow text is an important need and is working on adding it to the SVG recommendation (version 1.2).


Valid XHTML 1.1!