SVG Coordinate System
Jakob Jenkov |
The coordinate system of SVG (and most other computer graphics) is a bit different from the coordinate systems of mathematics, graphs etc.
Video Version
Here is a video version of this tutorial:
Mathematical / Cartesian Coordinate System
In a normal cartesian coordinate system the point x=0, y=0 is at the lower left corner of the graph. As x increases the points move to the right in the coordinate system. As x decreases the points move to the left in the coordinate system. As y increases the points move up in the coordinate system. As y decreases the points move down in the coordinate system.
Here is an illustration of a normal graph coordinate system with 0,0 at the lower left corner:
SVG Coordinate System
In the SVG coordinate system the point x=0, y=0 is the upper left corner. The y-axis is thus reversed compared to a normal graph coordinate system. As y increases in SVG, the points, shapes etc. move down, not up.
Here is an illustration of an SVG coordinate system with 0,0 at the upper left corner:
Coordinate System Units
You can specify what 1 unit in the SVG coordinate system corresponds to. You do so everywhere
you can specify a coordinate (x and y position, width and height etc.).
You specify the units after the value, for instance 10cm or 125mm.
If you do not specify any units after a coordinate value, the unit is assumed to be pixels (px).
Here is a list of the units you can use with SVG elements:
| Unit | Description |
|---|---|
em |
The default font size - usually the height of a character. |
ex |
The height of the character x |
px |
Pixels |
pt |
Points (1 / 72 of an inch) |
pc |
Picas (1 / 6 of an inch) |
cm |
Centimeters |
mm |
Millimeters |
in |
Inches |
The units you set on the <svg> element in the width and height
attribrutes only affect the <svg>
element (the viewport). The shapes inside the <svg> element must have their
own units set. Again, if no units are specified the unit defaults to pixels.
| Tweet | |
Jakob Jenkov | |
