Table of Contents## Technique: Converting from Cartesian Coordinates

Entire Site

If you are transferring data from other systems to SVG,
you may have to deal with vector drawings that use Cartesian coordinates
(the ones you learned about in high school algebra) to represent data.
In this system, the (0, 0) point is at the lower left of the canvas, and
*y*-coordinates increase as you move upwards. Figure 5-12 shows the coordinates
of a trapezoid drawn with Cartesian coordinates.

Since the *y*-axis is “upside-down” relative to
the SVG default, the coordinates have to be recalculated. Rather than do
it by hand, you can use a sequence of transformations to have SVG do all
the work for you. First, translate the picture into SVG, with the
coordinates exactly as shown in Example 5-7. (We’ll also include the
axes as a guide.) To nobody’s surprise, the picture will come out
upside-down. Note that the image in Figure 5-13 is
*not* left-to-right reversed, since the
*x*-axis points the same direction in both Cartesian
coordinates and the default SVG coordinate system.