main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe- ayuda

carto:papers:svg:examples:xslt:basics

Using XSLT to create SVG content

The XML family offers a possibility to transform XML documents into XML documents with different Elements, Attributes, Content and Structure. The W3C recommendation to do so is called XSLT (Extensible Stylesheet Language Transformation). XSLT is one sublanguage of XSL www.w3.org/Style/XSL/">W3C XSL Site).
The following examples are using XSLT to transform from various XML Namespaces to SVG. They should give you just a few hints, how one could use XSLT to create SVG content.
For more detailled tutorials on XSLT browse to zvon.org or to the official www.w3.org/TR/xslt.


CONTENT


Basic XSL Transformations

To give you an idea, how XML content is transformed to SVG by using XSLT, thematic data is transformed into a SVG bar chart. The SVG file beside is a result of such a transformation. It shows some XML values within a bar chart. In order to know, how the XSLT processor is generating such an output, download the sample files, and proceed like it is explained within the Technical Details section.

Files used

Right-click, save ...
data1.xml
stylesheet1.xsl
output1.svg

Technical Details

In order to apply a XSLT stylesheet to XML data, a XSLT processor is required. For these examples I used the instant-saxon (vers. 6.5.2) command line application (saxon.sourceforge.net). It is just a cut-down version of the full Saxon package for machines running on Windows. Both versions are implementing the W3C XSLT 1.0 specification. A transformation can be forced by using the following commandline:

saxon -o output1.svg data1.xml stylesheet1.xsl
The command "saxon" is calling the instant-saxon commandline application. The option "-o" is defining the output which is called "output1.svg". "data1.xml" is the input file and "stylesheet1.xsl" the corresponding XSLT stylesheet. Make sure, that alls files including instant-saxon are in the same folder and the dos prompt is located there too.
Instead of Saxon, one could use the Microsoft's commandline XSLT processor as well (msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/htm/xslt_starter_7cf8.asp).

XML Data

<?xml version="1.0"?>
<dataSet>
  <bar fill="rgb(255,100,75)">
    <value>71</value>
    <desc>01</desc>
  </bar>
  <bar fill="rgb(0,225,0)">
    <value>89</value>
    <desc>02</desc>
  </bar>
  <bar fill="rgb(75,100,245)">
    <value>23</value>
    <desc>03</desc>
  </bar>
  <bar fill="rgb(200,200,200)">
    <value>108</value>
    <desc>04</desc>
  </bar>
  <bar fill="rgb(245,245,25)">
    <value>93</value>
    <desc>05</desc>
  </bar>
</dataSet>

This example is showing just one possiblity to structure bar chart information in a XML conform way. Each bar element is symbolizing one bar. The content of its attribute "fill" can be used to define the colour of the bar. Furthermore, each bar has two children, the <value> and <descr> element. The first one is containing the value. The second one a description of this value.

XSLT Stylesheet

<?xml version="1.0" encoding="utf-8"?>
<xsl:transform xmlns:xsl="https://www.w3.org/1999/XSL/Transform" version="1.0" >
  <xsl:template match="dataSet">
    <svg width="200px" height="250px" xmlns="https://www.w3.org/2000/svg">
      <g id="bar" transform="translate(0,200)">
        <xsl:for-each select="bar">
          <xsl:variable name="val" select="value"/>
          <rect x="{position()*25}" y="-{$val*1.5}" height="{$val*1.5}" width="15" style="fill:{@fill};"/>
          <text x="{position()*25 + 7.5}" y="0" style="font-family:arial;text-anchor:middle;baseline-shift:-15;">
            <xsl:value-of select="desc"/>
          </text>
        </xsl:for-each>
      </g>
    </svg>
  </xsl:template>
</xsl:transform>

As you can see, XSLT syntax is XML as well. Elements are containing start- and end-tags. Each element has different attributes and so on. Because of that, a stylesheet only has one root element, which can be <xsl:template> or <xsl:transform>. In this example, straight SVG syntax can be used within the stylesheet, too.
In order to access the XML data within data1.xml, a template is pointing to the root element of the corresponding file. In this example the string "dataSet" is achieving that (line 3). In order to expand the functionality of such strings, a "sublanguage" called XPath (www.w3.org/TR/xpath) was created by the W3C. XPath is offering an easy to understand syntax for navigating within a XML tree (e.g. children, descendants, ...). In this example, the understanding of XPath is not necessary.
To access every <bar> element, XSLT provides different possibilities. Here, for-each is looping through each <bar> element. Within this loop a variable called "val" is declared. It graps the "value" and saves it. Next, a rectangle is drawn. The height is calculated by multiplicating the value with a constant factor. This rectangle is representing one bar. Due to the differing coordinate systems, it has to be translated by manipulating the "y" attribute, too. The rectangle is filled by picking the colour of the "fill" attribute.
In order to label each bar, a <text> element is created. The value-of element is picking the "description" of the data <desc> element.
To complete the stylesheet, each element which is still open has to be closed.



Transforming GML to SVG (coming soon)

File used

Technical Details

Syntax

Serverside XSL Transformations with PHP (coming soon)

File used

Technical Details

Syntax

Examples provided by Georg Held