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 "".
The next article will act as a reference for the basic shapes available in SVG.