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.
|