Character arc
SVG has a few elements to draw shapes. <rect> to draw rectangles, <circle> and <ellipse> to realize the matching figures. The list is short, but is more
than compensated by the <path> element, capable of drawing any and all shapes.
It is in the d attribute and with specific commands that you compose a shape with a
sequence of characters.
While elusive, most instructions are easy to grasp, but there is one directive which is far from intuitive. And as it often happens with vector graphics, the issue is best solved with practice, testing the values first-hand.
In the body of an <svg> element, set up a <path> with the mentioned attribute.
<path d="M 0 0 ..." />The first instruction describes the origin, the x, y coordinate where our journey begins. Following the “M” character and this short preamble you elaborate the shape with a veritable language. Additional letters, each with its own use. You may struggle picking the numbers, but in most cases, it is possible to understand their meaning at a glance.
To draw a line you need the “L” character and just two values, for where the line should end. For a quadratic bezier curve and the letter “Q”, the pair follows another set of x, y coordinates, this time for a control point, pinching the line out of the narrow and straight path. For a cubic bezier curve marked by “C”, the logic is the same, but with two control points instead of one.
You may need up to six values, but the influence, the purpose of each number is clear.
It is difficult to argue the same when you want to draw an arc.
Following the “A” character you need seven arguments, with often inscrutable implications.
To understand the lot, break out the formula in a few pieces.
rx and ry describe the radius, or rather radii, of a makeshift ellipse. Think of a figure stretching horizontally and vertically to connect two points: where the arc starts and where the same ends. The origin precedes the arc, while the destination, that is dictated by the last pair, x and y.
On to more cryptic values. large-arc-flag is a flag, a number set to either 0 or 1 to toggle a specific feature. And together with sweep-flag, it lets you pick which arc to draw. Indeed, the moment you build the figure based on two radii, it is possible to connect the dots in more than one way. There are two ellipses, each with a fork in the road.
Which path to follow?
Per large-arc-flag, the smaller or the larger segment.
Per sweep-flag, the path moving in a counter-clockwise or a clockwise manner.
Two ellipses, four possible paths. You have quite a bit of freedom to compose the shape. And there is one more number still: angle. This last one number rotates the ellipses on the x axis, and its influence is even less clear. Say that you update the value from the default 0. Why, in this instance the ellipse would never be able to connect the points in the same, clear-cut manner.
And what about the values of the radii, for that matter. What if these are too small to craft the ellipse. What if these are too big?
In this instance, the ellipse is scaled to create the connection, but the process is far from elementary, far from predictable.
You can try to understand the math, and you are more than welcome to tinker the angle yourself, but personally, I’m more than satisfied with the other six values. If you need to rotate the figure, I’d suggest the transform attribute instead.
The behavior is much more predictable, as you are able to turn the element from the origin of your choosing.
<g transform="translate(-27 2) rotate(-5)">
<path d="M -12 0 A 11 7 0 0 0 12 0 A 11 7 0 0 0 -12 0" />
</g>Even with just six values, you have plenty of freedom. You have options, some clear, some quite obscure, and a roadmap to know the influence of each: practice.
By the end of a possibly emotional journey, you have to admit there’s a lot you can draw with a <path> element. There’s a lot you can draw with a single character. Even with one less number.