Scalable Vector Graphics: Drawing Basics

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.

The SVG’s viewBox attribute determines the co-ordinates the image uses. The following SVGs would look identical when scaled to the same size:

• a viewBox of 0,0 to 200,100 with a line from 0,0 to 100,50
• a viewBox of 0,0 to 300,150 with a line from 0,0 to 150,75
• a viewBox of 0,0 to 30,15 with a line from 0,0 to 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 width and 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.