# SVG Coordinate System

 Jakob Jenkov Last update: 2014-09-14

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
Featured Videos         Close TOC All Trails Trail TOC Page TOC Previous Next