Before we start drawing, we have to talk about

The coordinate system of SVG

The image elements are drawn in a plane with a coordinate system where the \(x\)-axis runs from left to right, and the \(y\)-axis from top to bottom. The latter in particular might take some special attention, because in maths lessons, the \(y\) axis usually runs from bottom to top.

-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y

The coordinates themselves have no specific dimension: they are simply numbers with no unit of length (such as pixels or metres). To draw a circle, we need to specify for the circle element the \((x, y)\)-coordinates of the center of the circle (via the x and y properties) and the radius of the circle (via the r property).

<circle cx="100" cy="100" r="50" />

This draws a circle (shown below with a thick black border) with center at position \((100, 100)\) and radius 50.

-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (100,100) 50

Dimensions and viewport of an SVG image

The SVG element contains all image elements, but it also defines the dimensions and the viewport of the image. It sets the external and internal dimensions of the image.

The width and height properties define how much space the image takes up in the browser. These are the external sizes. The size defined by width and height is how the rest of the HTML thinks of the image and how big it appears in the browser.

There is also a viewBox property that defines the viewport for the image on the coordinate system. Only those parts of the image elements that fall within the viewport are visible in the SVG image. The viewport is defined by four internal measures that refer to the coordinate system of the SVG image. The first two values of the viewBox property define the position of the top-left corner of the viewport and the last two values define the width and height of the viewport from the perspective of the image elements. The dimensions defined by viewBox is how the image elements think about the image when they position themselves within the SVG coordinate system.

In the following three examples, the three SVG images have exactly the same content: the circle centered at position \((100, 100)\) and radius 50 that we have already encountered above. However, the three images differ in terms of viewport, so the circle is positioned differently within the image each time. Or they differ in terms of dimensions, causing the image to be displayed larger or smaller in the browser. If the size defined by viewBox does not match the width and height properties, the image is made larger or smaller.

<svg width="100px" height="100px" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" />
</svg>

This SVG image has a viewport with top-left corner at position \((0, 0)\) and a width and height of 200.

-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,0) 200 200

This is the same viewport as the SVG image below, but that image is displayed twice as large in the browser. Where the image above is displayed in the browser with a width and height of 100 pixels, the image below displays with a width and height of 200 pixels.

<svg width="200px" height="200px" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" />
</svg>

The figure below is display with the same size in the browser.

<svg width="200px" height="200px" viewBox="0 0 100 100">
  <circle cx="100" cy="100" r="50" />
</svg>

But its viewport only has half the size: the viewport has width 100 and height 100.

-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,0) 100 100

We can also set at which coordinate the upper left corner of the viewport should be. In the following example, we move the origin of the coordinate system to the center of the image. To do this, we set the top left corner to -100,-100, which is half the image size in negative.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <circle cx="0" cy="0" r="50" />
</svg>

Note that position of the center of the circle is now 0,0.

-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,0) (-100,-100) 200 200

SVGs often have an xmlns property as well. This, however – if the image is inlined in HTML – can be omitted.