SVG Arc Command Syntax for Elliptical Arcs

The SVG <path> element uses the Arc (A or a) command to draw complex elliptical curves between two points. This guide breaks down the exact syntax, details each of the seven parameters required by the command, and explains how to configure arc flags to achieve the desired curve orientation in scalable vector graphics.

The Arc Command Syntax

The SVG elliptical arc command is defined inside the d attribute of a <path> element. It accepts seven parameters:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

• Uppercase A indicates that the ending coordinates (x, y) are absolute.
• Lowercase a indicates that the ending coordinates (dx, dy) are relative to the current pen position.

Parameter Breakdown

1. rx (X-Radius): The horizontal radius of the ellipse.
2. ry (Y-Radius): The vertical radius of the ellipse.
3. x-axis-rotation: The rotation of the ellipse relative to the x-axis, measured in degrees.
4. large-arc-flag: Determines whether to draw the larger or smaller arc segment.
   • 0: Draws the shorter arc (arc measure less than 180 degrees).
   • 1: Draws the longer arc (arc measure greater than or equal to 180 degrees).
5. sweep-flag: Determines the direction the arc is drawn.
   • 0: Draws the arc in a counter-clockwise (negative-angle) direction.
   • 1: Draws the arc in a clockwise (positive-angle) direction.
6. x (or dx): The x-coordinate of the arc’s end point.
7. y (or dy): The y-coordinate of the arc’s end point.

Practical Example

To draw an arc, move the pen to a starting point using the M (MoveTo) command, followed by the A command:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100 A 45 45 0 0 1 150 100" fill="none" stroke="black" stroke-width="2" />
</svg>

In this example: * The path begins at (50, 100). * An ellipse with an x-radius of 45 and a y-radius of 45 (a circular arc) is used. * The x-axis rotation is 0. * The large-arc-flag is 0 (minor arc). * The sweep-flag is 1 (clockwise sweep). * The arc terminates at (150, 100).

Understanding the Four Arc Combinations

For any given start point, end point, and radii, four distinct arcs can connect the points based on the combination of large-arc-flag and sweep-flag:

• 0 0: Small arc, drawn counter-clockwise.
• 0 1: Small arc, drawn clockwise.
• 1 0: Large arc, drawn counter-clockwise.
• 1 1: Large arc, drawn clockwise.