1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• Video Version
• Mathematical / Cartesian Coordinate System
• SVG Coordinate System
• Coordinate System Units

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:

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.