XSLT Transformation

From Svg wiki

Contents

[edit]

XSL Transformations and SVG

Since SVG is XML, and XSLT typically transforms XML to other XML, SVG can be the result of an XSLT transformation, or it can be its source. Most commonly, it's a result.

SVG can be run on the web server, on the client, or as a batch process. To get started, it is best to use it first as a batch process, so you have a clear picture of the source, stylesheet, and result trees.

XSLT transformations take a source tree of input XML and process them with an XSLT stylesheet to produce output SVG. For example, taking the following XML (source.xml): 

<?xml version="1.0"?>
<!-- source.xml -->
<chart>
  <bar>
  <label>Salmon</label>
  <value>13</value>
</bar>
<bar>
  <label>Halibut</label>
  <value>23</value>
</bar>
</chart>

and the following XSLT stylesheet (stylesheet.xsl): 

<?xml version="1.0"?>
<!-- stylesheet.xsl -->
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="xml" indent="yes"
    doctype-public="-//W3C//DTD SVG 20010904//EN"
    doctype-system="~http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"/>

  <xsl:template match="/">
    <svg width="400" height="400">
     <xsl:apply-templates/>
    </svg>
  </xsl:template>

  <xsl:template match="bar">
  <xsl:variable name="pos" select="position()"/>
  <xsl:variable name="val" select="value"/>
   <xsl:value-of select="bar"/>
  <g>
       <rect style="fill:rgb({$pos*40},180,{255-$pos*40});
          stroke:black"
          x="{$pos*40+20}" y="{360-$val*10}"
          width="20" height="{$val*10}"/>
        <text x="{$pos*40+30}" y="380" text-anchor="middle"
          style="font-family:Arial; font-size:10;
          font-weight:bold; fill:black">
          <xsl:value-of select="label"/>
        </text>
  </g>
 </xsl:template>
</xsl:stylesheet>
[edit]

Saxon

you can run Instant Saxon with a command of: 

saxon source.xml stylesheet.xsl > out.svg

and it will produce a new file, out.svg, a primitive bar chart. NOTE: arguably, "real" Saxon is just as easy to run, available from the same place. With Saxon 7.0 (not available in an "instant" version), Michael Kay has supported many of the planned XSLT 2.0 features, such as (imporant for SVG) - full processing capability on temporary trees (previously known as result tree fragments).

Once you're used to running transforms that make new files, i.e. using Saxon or an equivalent XSLT processor in batch mode, you can start running them on the server. The different techniques on the server are fairly language-specific, but the XSLT code is the same across server, batch, and client environments.

Running XSLT on the client is more tricky (and less usable, given the current installed base of capable clients), as there is still poor browser support for both XSLT and SVG. However, Chris Bayes has pioneered work in this area, as has Jeni Tennison.

There are also some cool XSLT stylesheets in Batik CVS.

[edit]

ASP and MSXML

The following code performs an XML * XSLT -> SVG tranformation in ASP. As recommended by the SVG specification, you should serve your SVG content with a '.svg' file extension; see Server-Side SVG for instructions. 

<%
LANGUAGE="javascript" %>
<%
// create instances of xml documents for source and xslt
var docXML = Server.CreateObject("MSXML2.DOMDocument.3.0");
var docXSL = Server.CreateObject("MSXML2.DOMDocument.3.0");

// set some general properties for both doc objects
docXML.async = docXSL.async = false;

// load the files
docXML.load(Server.~MapPath("mySource.xml"));
docXSL.load(Server.~MapPath("myStylesheet.xsl"));

// if the docs have parsed ok make the transformation
var strSVG;
if(docXML.parseError==0 & docXSL.parseError==0)
  strSVG = new String(docXML.transformNode(docXSL));
else strSVG = "parseError";

//set MIME type
Response.ContentType = "image/svg+xml";

// write transformed content
// -- Response.Write(strSVG); should but doesn't work...
// -- encoding specified in XML declaration is incorrect error in IE.
// -- Following two lines strip the encoding attribute from the
// -- xml processing instruction. Is this a bug???
Response.Write(strSVG.substring(0,20));
Response.Write(strSVG.substring(37));

%>
[edit]

Examples of XSLT to SVG on the Web

Following are some links to examples of XSLT-generated SVG:

Retrieved from "http://wiki.svg.org/XSLT_Transformation"