waldyrious / understand-svg-arcs

An explainer and diagram to help understand the syntax of the arc command of SVG paths.

Understanding SVG arcs

SVG paths can be daunting at first, but upon closer examination, most of the commands can be understood pretty intuitively.

The syntax of the arc command, however, seems to be an exception. This repo provides some resources that hopefully make its syntax clearer.

Explanation

The awkward syntax of the arc command is due to it being designed to match the structure of the other SVG path commands, all of which consist of one or more pairs of (x,y) coordinates, the last one being the coordinates of the new "current point" of the "pen" (to follow the analogy of a plotter).

However, just like a circle is defined more intuitively by specifying the center and radius, an elliptical arc is also best understood if defined by its center, the minor and major radius, the starting angle and the angular span it covers. The fact that SVG requires a different way to specify an arc is what makes it weird and cumbersome to understand.

The best way to think of SVG's "endpoint parametrization" is as providing parameters to a constraint solver: the arc has to follow an ellipse with a given width/height ratio (x-radius vs. y-radius), with a given rotation^†, and that passes through the start point given at the end of the preceding path command, and the end point given at the end of the arc command.

^†Note that the rotation maintains the start and end points, whereas a rotation with the transform attribute (outside the path description) would cause the entire path, including the start and end points, to be rotated.

These restrictions (with a few adjustments to prevent unsolvable constraints) result in two possible ellipses, and four corresponding elliptical arcs connecting the two endpoints. The large arc and sweep flags (specified as 0 or 1) then provide disambiguation between these four arc possibilities, giving a unique, unambiguous (but highly unintuitive) arc parametrization.

Practical example

The live demo page (screenshot below), showcases a few variations of an arc command with the same starting and ending point (100,200 and 250,150), along with the ellipses that are used for their construction, as a practical example that may help understand the textual description above.

Resources

The demo above takes inspiration from the excellent diagram in the OReilly Commons wiki.

The SVG implementation of this diagram was inspired by Jakob Jenkov's excellent svg paths tutorial, with some help from his svg markers tutorial for the arrow heads. He also made a video version of the svg paths tutorial (content about arcs starts at 2:52), which helps visualize the effects of the arc command parameters.

Another nice video explanation is this one by Glenn Howes (content about arcs starts at 10:42). The iOS app used in the video seems to be an interesting way to experiment with arcs interactively.

understand-svg-arcs's Issues

Add link back to repo from page

New diagram: a series of superimposed arcs with only the rotation changing

...possibly using a gradient-like color scheme, to make the progression clearer.

This should drive home the point that the start and end points are fixed, and that the ellipse can change size.

Make the live demo interactive

Perhaps there could be a single main diagram with controls (sliders?) for each parameter, and maybe the current images could work as buttons to set up specific presets (combinations of parameters).