Absolute vs. Relative Co-ordinates for Defining an SVG Path

We previously looked at taking an icon drawn on paper and converting it to SVG code. The process first involves identifying co-ordinates for key points within a design. We use these alongside a set of commands to form the data for a path element to render our icon.

The icon we transcribed used three commands: M, L, and Z. These respectively represent Moving to a location, drawing a straight Line to a point, and closing an open path. Like much in programming, casing is important. Many path commands also have a lower-case counterpart.

In this article, we’ll look at how they differ.

Moving To or Passing By?

An Example

The following SVG renders to look like the square shown in Image 1. As we’re focussing on the d attribute of the path element, I’ve left out both styling attributes, and the html for a Web page to host the SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
    <path d="m1,1 l5,0 l0,5 l-5,0 z"></path>
</svg>

Now, let’s use the same markup but with one modification. Instead of lower-case commands in the value of the d attribute, we’ll use their upper-case equivalents. The result is shown in Image 2.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
    <path d="M1,1 L5,0 L0,5 L-5,0 Z"></path>
</svg>

What’s Going On?

In general, lower-case commands work with relative co-ordinates. In contrast, upper-case versions interpret them to be absolute. Z (and z) is an exception; these behave in the same way as they don’t rely on co-ordinates.

In the markup for Image 1, we declared instructions to:

1. m1,1: move across and down by 1 unit from the origin without drawing.
2. l5,0: draw a line for 5 units rightwards.
3. l0,5: draw a line for 5 units downwards.
4. l-5,0: draw a line for 5 units leftwards.
5. z: close the loop, resulting in drawing a line upwards.

As we can see in Image 1, this forms a square.

In the markup for Image 2, we:

1. M1,1: moved directly to point (1,1).
2. L5,0: draw a line rightwards and upwards to point (5,0).
3. L0,5: draw a line downwards and leftwards to point (0,5).
4. L-5,0: draw a line leftwards and upwards to point (-5,0).
5. Z: close the loop, resulting in a line being drawn rightwards and downwards back towards point (1,1).

In Image 2, we only see part of the shape we’ve drawn. The image’s viewBox attribute has a top-left co-ordinate of (0,0); parts of the image with negative co-ordinates are outside of our specified viewport.

Absolute vs Relative Co-ordinates

Ultimately, it’s possible to achieve the same results whether we use absolute, relative, or mixed co-ordinates. The important thing is to be mindful of which is being used when plotting the next point in an image.

When thinking about an object’s outline, it may be easier to use relative co-ordinates. That way, we only need concern ourselves with how far we move in each direction. As we don’t need to specify exact co-ordinates, we’re left to focus only on the shape being drawn.

But when transferring diagrams from graph (or dotted) paper, it may be preferable to use absolute co-ordinates. The positions of key points will be marked on the page, removing the need to mentally track their whereabouts. And by specifying exactly where each data point is, any ambiguity about their locations – which might be important when using the viewBox attribute – is eliminated.

Summary

The syntax for declaring an SVG path is case sensitive. In general, upper-case commands treat co-ordinates as being absolute and lower-case versions relative.

When mentally following an object’s outline, you may find it easier to think in terms of relative co-ordinates when moving from point to point. But when transferring an image from a design on paper, there’s less ambiguity with absolute co-ordinates.

You can use relative or absolute co-ordinates when defining data for a path; it’s even possible to use a mix of the two. The important thing is to use the system that’s most convenient for you.

Thanks for reading!

This article is from my newsletter. If you found it useful, please consider subscribing. You’ll get more articles like this delivered straight to your inbox (once per week), plus bonus developer tips too!