SVG - Location, Location

Understanding the coordinate system of SVG illustration is crucial to your ability to create and control your structures.

Nothing can be drawn in SVG without telling the system where to draw, and the size of a graphic.

The Cartesian (after René Descartes) coordinate system typically starts (0,0) at the bottom left corner of a rectangular grid.

As with most coordinate system, the horizontal metric ( x axis ) is given first, then the vertical metric ( y axis ). If we were working in 3 dimensions, the ( z axis ) metric would then be given, as the depth axis.

When we went from paper and pencil drawing to computer-aided drawing, this caused a kerfuffle in the graphics realm. Computer monitors at the time were cathode ray tubes (CRT), which shot an electron beam scanning from left to right and top to bottom of the monitor.

To avoid confusion, computer graphics flipped their coordinate system to more closely align with this.

It may take a while to get your head around this tranformation. In fact that command can be used to change some things, but not all:

More about transformations can be found here.

If you do not define a view box, the SVG center (0,0) defaults to the upper-left corner.

Box 1 - Vanilla


Box #1

The controls for the SVG box above were established in this HTML document, so easy to view.

<svg width="300" height="300"
style="background-color:#ffcd86;
border:2px solid black;
border-radius:10px;">

Note we did not define a viewBox for Box #1, only a size.

Many times it is sufficient to provide a size and a few other accoutrements as we did here. Other times you may have to resort to some tweaking.

The small circle in the top left corner of Box #1 was made with a center at (25,25), which is 25 pixels down and right of the top-left corner.

<circle r="10" cx="25" cy="25" fill="red"/>
<circle r="25" cx="150" cy="150" fill="red"/>

We did not have to specify pixels, as they are the default unit in SVG.

Since the box is 300 x 300 pixels, the larger red circle is centered at 150,150.

Box 2 - Nested SVG


Box #2

We've tweaked our coding for this SVG image - adding some color and a dotted border via CSS.

In Box 1 we used basic commands to place 2 circles in an SVG box.

The center was at the upper-left corner. What happens if we change that?

<svg width="300" height="300" style="background-color:#ff6a00; border:2px dotted black;border-width:5px;border-radius:10px;">
<circle r="25" cx="50" cy="50" fill="black"/>

<svg x=100 y=100>
<circle r="25" cx="50" cy="50" fill="blue"/>
</svg>

<svg width="300" height="25">
<text x="120" y="15" font-face="DejaVu">Box #2</text>
</svg>

In this example, we've added a nested block of SVG code AFTER the black circle, but we altered the 'x' and 'y' to '100'. Those values have been applied to the location of the blue circle - effectively making them '150' and '150'.

As you can see, the blue circle is in the center of a 300 x 300 square.

Box 3 - Transform


Box #3

Another way to place or alter a graphic is to use the transform command.

We can rotate, scale, or move something to a new location with transform.

For a simple example, Box 3 above has 1 blue rectangle located 10px inside our box. But we have moved (translated) it to a different location and a differerent color, using transform & translate.

<rect
x="10"
y="10"
width="180"
height="60"
fill="blue"
transform="translate(50,50)"
style="fill:green"
/>
<rect
x="150"
y="250"
width="60"
height="60"
fill="blue"
transform="rotate(45,225,225)"
style="fill:red"
/>

The red square started out blue, and was rotated 45°. There is a bit of a trick to rotating something around a center. This is covered here.