Draw a Circle Using SVG Path Arc Commands
Learn how to draw a perfect circle using two arc (A) commands in an SVG path. Understand the rx, ry, large-arc-flag, and sweep-flag parameters.
Detailed Explanation
Drawing a Circle with Path Arcs
Unlike the <circle> element, which uses cx, cy, and r attributes, an SVG <path> must build a circle from arc commands. The trick is to use two semicircular arcs that together form a complete circle.
The Path
M 50,0 A 50,50 0 1,1 50,100 A 50,50 0 1,1 50,0 Z
Command Breakdown
| Segment | Meaning |
|---|---|
M 50,0 |
Move to the top of the circle (center x, center y minus radius) |
A 50,50 0 1,1 50,100 |
Draw an arc with rx=50, ry=50, rotation=0, large-arc=1, sweep=1, ending at the bottom |
A 50,50 0 1,1 50,0 |
Draw the second arc back to the top |
Z |
Close the path |
Why Two Arcs?
A single arc command cannot draw a full 360-degree ellipse because the start and end points would be identical, making the arc direction ambiguous. By splitting into two 180-degree arcs, each semicircle is unambiguous.
The Arc Parameters
The A command takes seven numbers: rx ry x-rotation large-arc-flag sweep-flag x y. For a circle, rx and ry are both set to the radius. The large-arc-flag (0 or 1) chooses the larger of the two possible arcs, and the sweep-flag (0 or 1) controls the direction (clockwise vs. counterclockwise).
Scaling the Circle
To change the radius, update rx, ry, and the endpoint coordinates proportionally. For a circle of radius r centered at (cx, cy), use:
M cx,(cy-r) A r,r 0 1,1 cx,(cy+r) A r,r 0 1,1 cx,(cy-r) Z
Use Case
Use path-based circles when you need to animate the stroke with CSS stroke-dasharray/stroke-dashoffset, since these properties only work on path elements in some older browsers. Also useful for icon fonts and SVG sprites where all shapes must be paths.