SVG coordinate system

The cordinate system in SVG is different from the coordinate system that we use in mathematics.

The point (0,0) (x=0 y=0) in SVG is at the upper left corner. You can see the illustration of the SVG coordinate system below:

The Viewport

The area of the canvas that your document intends to use is called the viewport. The size of the vieport is set with the width and height attributes on the <svg> element. width and height can be specified as a number followed by a unit identifier. Here are the most popular unit identifiers:

px
Pixels (used on default)
pt
Points
em
The font size of the default font, usually equivalent to the height of a character
ex
The height of the letter x
cm
Centimeters
mm
Millimeters
in
Inches

The Viewbox

The viewBox attribute is set on the element. The value of this attribute consists of four numbers that represent the minimum x-coordinate, minimum y-coordinate, width, and height of the user coordinate system that you want to superimpose on the viewport.

<svg width="4cm" height="5cm" viewBox="0 0 80 100">

This example shows how to set up the coordinate system that represents 20 pixels per centimeter for a 4cm by 5cm drawing.

Numbers specified for the value of the viewBox attribute may be separated by commas or whitespace. Neither the width nor height can be zero, otherwise no graphics will be displayed.

The preserveAspectRatio

In cases when you use the viewBox attribute it is preferable to use the preserveAspectRatio attribute. In previuos example the ratio of the width to the height of the viewPort and the viewBox were identical. But when they are not the same you should use the preserveAspectRatio attribute in order to fit the image to the viewbox.

The preserveAspectRatio attribute has nine align parameters (x and y allignments - for more information see the W3C SVG recommendation). The preserveAspectRatio attribute can behave in the following ways:

  • Scale the graphic according to the smaller dimension so the graphic will fit entirely into the viewport.
  • Scale the graphic according to the larger dimension and cut off the parts that lie outside the viewport.

Here are two simple examples of the preserveAspectRatio attribute usage and the results:

Example 1

<svg width="150px" height="200px" version="1.1" viewBox="0 0 1500 1000"
preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1500" height="1000" fill="#9d1d20" stroke="black"
stroke-width="12" />
<circle r="300" cx="750" cy="500" fill="black"/>
<text x="100" y="75" font-family="Verdana" font-size="72" fill="black">
Picture 1
</text>
</svg>

Example 2

<svg width="150px" height="200px" version="1.1" viewBox="0 0 1500 1000"
preserveAspectRatio="xMaxYMin" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1500" height="1000" fill="#9d1d20" stroke="black"
stroke-width="12" />
<circle r="300" cx="750" cy="500" fill="black"/>
<text x="100" y="75" font-family="Verdana" font-size="72" fill="black">
Picture 2
</text>
</svg>