In this article, you’ll discover the basic concepts, document structure, and drawing elements used in SVG images.
If you’re completely new to SVGs, it may help to read the following articles first:
- Scalable Vector Graphics: an Overview
- 7 Reasons to Consider SVGs Instead of Canvas
SVG Co-ordinate Grid
An SVG is defined in whatever co-ordinate space you give it. That space does not necessarily correlate with pixels, centimeters, inches, or other absolute units, because an SVG can be scaled to any dimension.
viewBox attribute determines the co-ordinates the image uses. The following SVGs would look identical when scaled to the same size:
200,100with a line from
300,150with a line from
30,15with a line from
15,7.5(fractions of a unit are permitted)
Unlike mathematical graphs, the SVG co-ordinate system starts at the top left (usually
0,0) with the x-axis pointing right and y-axis pointing down. Therefore, a point at
100,200 represents 100 units to the right of the left hand edge and 200 units down from the top edge.
When an SVG is rendered, it can be given
height attributes or assigned dimensions in CSS. The image will be stretched or squashed in both directions to fill the space it’s been allocated. However, an SVG can declare that its aspect ratio can be preserved to ensure dimensions are scaled consistently.
Continue reading Scalable Vector Graphics: Drawing Basics on SitePoint.