Using XSLT and SVG together: a survey of case studies

Max Froumentin (W3C), Vincent Hardy (Sun Microsystems, Apache Foundation)

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.

The first part provides an overview of the XSLT language. Originally designed for the Extensible Stylesheet Language (XSL), XSLT is now widely used as general transformation language, which can transform any document of a given XML type into another of a different type. In particular, XML-to-HTML transformations are now 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.

The second part 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.

The third section provides concrete test-cases 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. Finally, the last example illustrates a method for generating an animated and interactive slide presentation from a simple XML syntax.

The last section provides a general discussion about the issues surrounding the use of both languages: advantages and drawbacks of using XSLT (compared to other techniques such as programming with the SVG DOM), and general design issues: SMIL animation vs. ECMAScript in SVG, or streaming and re-processing data with XSLT. The article is concluded with an outlook at the evolution of the techniques presented as versions 2.0 of XSLT and SVG are being developed.

Max Froumentin (, Vincent Hardy (
2004, route des Lucioles - BP 93
06902 Sophia-Antipolis Cedex
Tel: +33 492 38 78 89
Fax: +33 492 38 78 22