# 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

High-Performance
Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next