Skip to content

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

License

Notifications You must be signed in to change notification settings

waldyrious/understand-svg-arcs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

screenshot

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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages