XML to Scalable Vector Graphics (SVG)


SVG is a vector graphics format defined by W3C. The XSLT transformations can be used to generate SVG content form an XML data given as input. This principle can be used to generated a content according to the end user need or characteristics included in its profile (e.g the client can declare that it doesn't support - the used SVG viewer - displaying colors and so on ...).
To show how can this be applied, we give in the following some examples of XML data and the generated SVG content using two XSLT style sheets that we have developed in the context of content adaptation. The generated SVG content is very simple and can be used in another context such to design quickly titles or logos for WEB site pages or other applications.

XML document 1:

<?xml version="1.0" encoding="UTF-8"?>
<content>
<text>SVG Generated Content</text>
<width>700</width>
<height>110</height>
<fontSize>65</fontSize>
<color>black</color>
<backgroundColor>blue</backgroundColor>
<textBaseLine>75</textBaseLine>
</content>

SVG Generated content (using SVGgenerator.xsl)

generated SVG 1

XML document 2:

<?xml version="1.0" encoding="UTF-8"?>
<content>
<text>SVG</text>
<width>200</width>
<height>110</height>
<fontSize>65</fontSize>
<color>black</color>
<backgroundColor>black</backgroundColor>
<textBaseLine>75</textBaseLine>
</content>


SVG Generated content (using SVGgenerator.xsl)

generated SVG 2

XML document 3:

<?xml version="1.0" encoding="UTF-8"?>
<content>
<text>... HOME PAGE</text>
<width>500</width>
<height>80</height>
<fontSize>60</fontSize>
<color>blue</color>
<textBaseLine>60</textBaseLine>
</content>


SVG Generated content (using SVGgenerator2.xsl)

generated SVG 3

Finallty, this is the title of this page generated in SVG using the style sheet 'SVGgenerator.xsl':

XML document4:

<?xml version="1.0" encoding="UTF-8"?>
<content>
<text>XML to Scalable Vector Graphics (SVG)</text>
<width>700</width>
<height>60</height>
<fontSize>40</fontSize>
<color>blue</color>
<textBaseLine>40</textBaseLine>
</content>

SVG generated content (using SVGgenerator.xsl)

generated SVG 4

Valid XHTML 1.0!