SVG Home • Tutorials • Coordinate System
The 2-D SVG Coordinate System |
|
|
|
SVG displays on the surface of a screen, so SVG may be called a two dimensional or "2-D" system. Like most screen-oriented 2-D systems, SVG uses the upper-left corner of the screen for the origin, the point which is said to be at x=0 and y=0 or the ( 0, 0 ) point. As you move to the right of the origin, X increases. As you move down from the origin, Y increases. |
Each SVG node which has an X/Y location may have its location changed, either by another node in the SVG file or by ECMAScript (also known as "JavaScript") associated with the SVG file. We'll delve into the mechanics of both of these mechanisms later in this tutorial; for now, just realize that the location of a node is established when you declare the existence of that node, and that location may be changed under programmatic control at run-time.
Next Tutorial: Basic Shapes