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











Core Software Performance Optimization Principles

Thread Congestion in Java - Video Tutorial






Advertisements

High-Performance
Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next