SVG Arcs for perfect Roundings

Martin Rabensteiner - 2026-09-05
SVGGraphics

Drawing a circle in SVG is probably easier than in real life. This makes a circle with radius 10 and the midpoint at coordinates 10,10, quite self-explaining:

<circle cx="10" cy="10" r="10"/>

We can achieve the same results even with a rectangle and rounded corners:

<rect width="20" height="20" x="0" y="0" rx="10" ry="10"/>

Sometimes it is necessary to convert such rounded rectangles to paths, e.g. for a half-circle or to draw another rounded object. Simply converting it with inkscape to a path makes it a bit messy, because the circle is translated into a path with cubic bezier curves. These can't represent perfect circle curves and aproximates the point with many decmial numbers:

M 10,0
C 15.54,0 20,4.46 20,10 20,15.54 15.54,20 10,20 4.46,20 0,15.54 0,10 0,4.46 4.46,0 10,0
Z

Luckily, SVG delivers the arc command with A for absolute and for a for relative coordinates with the syntax A rx, ry rot a b x,y. rx and ry are the radius, so the same if not an ellipse. x and y are the coordinates to where the circle is drawn to. rot rotates the circle, and a and b can be used to switch the direction (e.g. quadrant vs. the other three quarters).

The path is then in the clean format:

M 10,0
A 10,10 0 0 1 20,10   10,10 0 0 1 10,20   10,10 0 0 1 0,10   10,10 0 0 1 10,0
Z

References