An SVG <path> element’s “arc” command (denoted a or A) has 7 parameters:

<path d='a {rx} {ry} {x-axis-rotation} {large-arc-flag} {sweepflag} {x} {y}' />

That’s quite a lot of params for one command, and the names of the params are not exactly enlightening. Here’s the deal:

• Background
  • SVG Commands
  • Command Parameters
• The Arc Command
  • rx,ry
  • x-axis-rotation
  • large-arc-flag & sweep-flag

Background

SVG Commands

There are a number of commands available for use in the d attribute of a <path> element, such as moveto (m) and lineto (l).

E.g. <path d='M100 100L200 200" />.

This command moves the pen to coordinates (100,100) and then draws a line to coordinates (200,200).

Command Parameters

Each command has a number of parameters. For the most part, these specify coordinates. Each command has an origin and a destination coordinate (i.e. where you want the pen to begin drawing and where you want it to “end up”). The origin is always inferred and the destination is generally explicit.

E.g.M100 100L200 200L300 300Z

The first lineto command (l200 200) has an inferred origin of (100,100) and an explicit destination of (200,200). the second lineto command (l300 300) has an inferred origin of (200,200) – where the pen ended up after the last command – and an explicit destination of (300,300). The closepath command (Z) has an inferred origin ((300,300))and and inferred destination ((100,100)).

There are a number of other parameters used by other SVG commands. Each Bézier command (t, q, s, or c) has one or two control points, which are either inferred or explicit.

Though Bézier curves – the basis of Adobe Illustrator’s “pen tool” – are famously difficult to intuit, the ‘arc’ command (a) is, to me, the most mysterious.

Its parameters are:

• rx,ry
• x-axis-rotation
• large-arc-flag
• sweepflag
• x,y

The Arc Command

The effects of the arc’s parameters are not completely intuitive. Here a few animations to clarify:

rx,ry

An arc is a portion of an ellipse. To understand the way an arc is drawn in SVG, you have to both understand which ellipse is being drawn and which portion of that ellipse is being selected.

Unless the x-axis-rotation is specified, the major and minor axes of the ellipse are strictly horizontal and vertical. Thus, rx is one half of the length of the horizontal axis and ry is one half of the length of the vertical axis of the ellipse.

For the path M 0 0 a {rx} {ry} 0 1 1 100 50:

Note that there are lower limits on the values of {rx} and {ry} in relation to the values of {x} and {y}. For instance, M 0 0 a 10 10 0 1 1 100 50 looks the same as M 0 0 a 50 50 0 1 1 100 50. In addition, the curve appears to behave erratically when one of {rx} or {ry} is made very small:

For the path M 0 0 a {rx} {ry} 0 1 1 100 50:

x-axis-rotation

Though the ellipse appears to be moving left/right and up/down, this is merely a side-effect of the actual function of this parameter. In fact, it simply rotates the ellipse’s horizontal axis (which, in this animation, is its major axis) by {x-axis-rotation} degrees clockwise.

For the path M 0 0 a 180 80 {x-axis-rotation} 1 1 100 50:

large-arc-flag & sweep-flag

So, now that it’s clear enough what shape the ellipse is going to be, we have to determine:

1 – {sweepflag}: which of the two possible points of origin the ellipse will have, and

2 – {large-arc-flag}: which of the two possible halves of the resultant ellipse will be represented.

To demonstrate the 4 possible outcomes,

For the path M 0 0 a 180 80 0 {large-arc-flag} {sweepflag} 100 50: