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:

<%-- y-axis --%> <%-- arrow --%> <%-- x-axis --%> <%-- arrow --%>

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.

Jakob Jenkov

Featured Videos




















Advertisements

High-Performance
Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next