A Minimal SVG Document

   



The SVG Coordinate System

Perhaps you remember the Cartesian coordinate system from one of your high school mathematics classes. The Cartesian coordinate system (also called the Euclidean coordinate system) allows you to specify any point in the Euclidean plane by means of a pair of numbers. The first number represents the horizontal value and the second number represents the vertical value. Often you'll see a pair of perpendicular line segments that represent the Cartesian coordinate system. The horizontal axis is labeled the x-axis, and positive values on the x-axis are to the right of the vertical axis (i.e., toward the right). The vertical axis is labeled the y-axis, and positive values on the y-axis are above the horizontal axis. The origin is the intersection point of the x-axis and the y-axis.

The situation is almost the same in the SVG coordinate system. The x-axis is horizontal and the positive direction is toward the right. The y-axis is vertical, but the positive direction is downward (i.e., south). As you can see, the positive y-axis points in the opposite direction of most graphs in a typical mathematics textbook. When we draw our graphics images, we'll have to consider this fact. This detail is easy to forget, and often it's the underlying cause of incorrect images.

Two more details about the SVG coordinate system: the origin is the upper-left corner of the screen, and the unit of measurement is the pixel, so the largest visible display is usually 1024x728.

Consider Figure 1.1, it displays the SVG coordinate system with four rendered points. Note that the coordinate system has been shifted downward and to the right in order to render the horizontal and vertical axes more clearly.

click to expand
Figure 1.1: The SVG coordinate system.

Based on the definition of the SVG coordinate system, we now know that:

  • point A(50, 50) is 50 units to the right and 50 units downward

  • point B(200, 50) is 200 units to the right and 50 units downward

  • point C(50, 100) is 50 units to the right and 100 units downward

  • point D(200, 100) is 200 units to the right and 100 units downward



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net