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
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:
