The SVG Co-ordinate System

The SVG co-ordinate system is directly controlled by several attributes on the svg tag.

  • width - Specifies the width of the canvas area. By default, this is measured in pixels.
  • height - Specifies the height of the canvas area.
  • viewBox - Four numbers are specified here. The first two indicate the co-ordinates at the top-left of the canvas area. The next two indicate the width and height of the co-ordinate system. When defining shapes, co-ordinates increase to the right and down.
  • preserveAspectRatio - Specifies how shapes should be rendered if the canvas area does not have the same width and height.

Portions of the drawing outside of the canvas area may still be drawn based on the overflow CSS attribute value. Setting this to none will ensure the drawing is clipped to the canvas area. Setting this to visible will ensure the entire drawing is shown.

Co-ordinate System Units

When drawing shapes, the default width of the pen is 1 co-ordinate unit. SVG essentially redefines a "pixel" as a co-ordinate unit, as specified by the view box. This means that a line 1px wide will appear much thicker if the view box's dimensions are smaller.

Controlling the Aspect Ratio

The aspect ratio is controlled with three primary options: none, meet, or slice. This option specifies whether the drawing will be forced to fit within the canvas area.

When preserveAspectRatio is set to none, the drawing will be scaled along both axes to fit perfectly within the canvas area. This may cause shapes to become distorted, if the width and height are not equal.

When using meet or slice, you must also specify the horizontal and vertical alignment within the canvas area. The meet option ensures that the entire drawing will fit within the canvas area. This may cause one axis to "gain" co-ordinates within the defined canvas. The slice option allows only the smaller axis to fit within the canvas area.

The alignment options must be set for both the X and Y axis. The entire string is case-sensitive in some browsers, so be careful how you set the value! The interactive demonstration below shows how the possible values for preserveAspectRatio affect the drawing.

The current value of the preserveAspectRatio attribute is "".

Aspect Ratio

- Default value.
none - Does not preserve aspect ratio. Scales to fit on both axes, and may distort the image.
meet - Preserves aspect ratio. Ensures the image fits on both axes.
slice - Preserves aspect ratio. The image will only fit on the smaller axis.

Horizontal Alignment

- Default value.
xMin - Align to left edge.
xMid - Align to horizontal center.
xMax - Align to right edge.

Vertical Alignment

- Default value.
YMin - Align to top edge.
YMid - Align to vertical center.
YMax - Align to bottom edge.

The next article will act as a reference for the basic shapes available in SVG.

SVG Tutorial and Reference

Introduction to SVG

SVG Co-ordinate System

Shape Reference

Path Reference

Text Reference

External SVG Resources

W3C SVG Specification Homepage

Mozilla Developer Network SVG Homepage

SVG Tutorial on jenkov.com