Mastering the SVG Arc (A) Path Command

The Arc Command (A)

The arc (A) command draws an elliptical arc from the current point to a new endpoint. It is the most complex SVG path command, with seven parameters.

Syntax

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

Parameter	Description
rx	Horizontal radius of the ellipse
ry	Vertical radius of the ellipse
x-rotation	Rotation of the ellipse in degrees
large-arc-flag	0 = smaller arc, 1 = larger arc
sweep-flag	0 = counterclockwise, 1 = clockwise
x, y	Endpoint coordinates

The Four Possible Arcs

Given a start point, end point, and radii, there are four possible arcs. The two flag parameters select which one:

M 10,80 A 45,45 0 0,0 125,80   (small, CCW)
M 10,80 A 45,45 0 0,1 125,80   (small, CW)
M 10,80 A 45,45 0 1,0 125,80   (large, CCW)
M 10,80 A 45,45 0 1,1 125,80   (large, CW)

Ellipse Rotation

The x-rotation parameter tilts the ellipse. A value of 0 means the ellipse axes are aligned with the coordinate axes. A value of 45 tilts it 45 degrees:

M 10,80 A 50,25 45 0,1 125,80

Common Pitfalls

• If rx or ry is too small to reach the endpoint, the browser scales them up automatically.
• A full circle cannot be drawn with a single arc (start = end is degenerate). Use two semicircular arcs instead.
• The arc direction depends on both the sweep flag and the positions of start/end points.