Absolutely relative

In the d attribute of <path> elements you are able to detail close to any shape with a veritable alphabet of instructions.

<path d="M 0 0 10 0 10 8" />

Past the M character you can instruct the element with a series of numbers, in which case the values refer to the x, y coordinates for a series of points, but for more complex shapes you have options. With the L character you draw a line. With Q and S bezier curves, be it quadratic or cubic. With A you draw arcs and with Z you signal the end of the sequence, the end of the current path.

There are also H, V, T and S, which promise to simplify lines and curves, but the point stands. In the string you have a set of commands for meaningful steps. And yet, for every instruction you have a choice between uppercase and lowercase letters. Capital and small M, capital and small L, C, and so forth and so on.

The difference between the two is not difficult to understand. With uppercase letters you instruct the path in absolute terms.

<path d="M 0 0 L 10 0 L 10 8" />

In a given coordinate system, start from (0, 0) and draw a line, first to the point 10 units to the right, then to the point 10 units to the right and 8 units down. You can almost picture the right triangle and a possible way to explain Pythagoras theorem.

With lowercase letters the instructions are relative. Relative from the current point in space.

<path d="M 0 0 l 10 0 l 10 8" />

From where you are, draw a line 10 units to the right. Further, starting from that point draw a line an additional 10 units to the right and 8 units down. You certainly obtain a triangle, but twice as wide.

Absolute and relative art Absolute triangle Relative triangle

Capital, lowercase. You can mix and match both versions in the same string, but if you are particular and like to keep things consistent, feel free to share in the preference of using one version only.

Only one question remains. Is it possible to draw a shape in one manner, change the notation and still have a valid drawing?

Most of the time you end up with a completely different, disastrous picture. A predictably jumbled mess. But there are instances where it is indeed possible to analyze a different, but appreciated, result.

Abstract art Absolute and relative cubic bezier curves Absolute and relative arcs Absolute and relative quadratic bezier curves

You really have to look for it though.