Introduction

Scalable Vector Graphics (SVG) is a vector graphics format encoded in XML that has the potential to revolutionize the way graphical content is delivered over the Internet. One of the most compelling reasons for encoding graphics as XML is that it allows graphical rendering of data to occur as a transformation. Hence, XSLT, which has no inherent graphics abilities, is capable of complex graphical results because it allows the SVG engine embedded in a browser to do most of the work.

Although this chapter assumes that the reader is already familiar with SVG, it reviews a few introductory techniques you will use often.

One of the first things you need to know about a graphics system is how its coordinate system is arranged. After years of algebra, trigonometry, and calculus, many technical readers find the Cartesian coordinate system the most natural. In this system, the x-coordinates increase in value from left to right, and the y-coordinates increase in value from the bottom of the graph to the top. Alas, SVG does not use a Cartesian system. Instead, it reverses the y-axis so that the coordinate 0,0 is in the upper-left corner and y-coordinates increase as you move downward. For many types of applications, the coordinate system is irrelevant. However, for situations involving the graphical display of data, the Cartesian system is better because it leads to display orientations that most people find intuitive. SVG has a powerful facility that lets you transform the coordinate system to the needs of your application. This is done via translations, rotations, and scaling of the coordinate system that can apply to individual lines and shapes or to graphical-element groupings. In particular, you can choose to work in a Cartesian coordinate system simply by specifying the following transformation:

<svg:g transform="translate(0,{$height}) scale(1,-1)">      <!--All contents in cartesian coordinates --> </svg:g>

Here, $height is the height of the entire SVG graphic or the max y-coordinate in the group.

When plotting data in a graph, you can translate and scale the coordinate system to the range of the data so data values can be used as coordinate values:

<svg:g transform="scale(1,{$height div $max})">      <!--All contents in cartesion coordinates --> </svg:g>

In this example, you scale the y-coordinate based on $height (the height of the SVG graphic) and $max (the maximum data value that will be plotted).

Converting to Cartesian coordinates and rescaling is convenient for plotting data, but it is problematic when you want to position text within the transformed coordinate system. The text is rendered upside down due to the Cartesian mapping and distorted due to the scaling. Hence, you must apply an offsetting transformation to the text:

<svg:text x="{$someXPos}"            y="{$someYPos}"            transform="translate({$someXPos},{$someYPos})                      scale(1,{-$max div $height})                      translate({-$someXPos},{-$someYPos})"> Some Text </svg:text>

Such transformations make my head spin, but are sometimes the easiest way to achieve a desired result.