Absolute vs. Relative Co-ordinates for Defining an SVG Path
How casing determines whether you move to, or move by
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 newsletter, 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:
m1,1: move across and down by 1 unit from the origin without drawing.l5,0: draw a line for 5 units rightwards.l0,5: draw a line for 5 units downwards.l-5,0: draw a line for 5 units leftwards.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:
M1,1: moved directly to point (1,1).L5,0: draw a line rightwards and upwards to point (5,0).L0,5: draw a line downwards and leftwards to point (0,5).L-5,0: draw a line leftwards and upwards to point (-5,0).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.
Bonus Developer Tip
If you’re working in a long code file in VS Code, you can take advantage of code folding to hide the bodies of loops and functions that aren’t immediately relevant. When you move your mouse over the left margin, V shaped arrowheads will appear at sections that can be temporarily hidden.
These tips are exclusively for my Substack subscribers and readers, as a thank-you for being part of this journey. Some may be expanded into fuller articles in future, depending on their depth.
But you get to see them here, first.