# SVG Path: Elliptical Arc

By Xah Lee. Date:

This page is a tutorial on SVG path element's elliptical arc command `A` and `a`.

## Basic Parameters

• `A rx ry rotate large_arc_flag sweep_flag x y` = Draw a elliptical arc from the current point to x,y. The ellipse has radius rx ry (major/minor axis), rotated by rotate (in degrees, clockwise.). The large_arc_flag and sweep_flag should be 1 or 0, they control which section of the ellipse to use.
• `a` = (relative coordinate).

Note:

• The elliptical arc always begin at current pen position, and ends at the last pair of numbers.
• The shape of the ellipse is determined by its major radius and minor radius. That is the first 2 numbers. Ellipse is technically a curve of 1 parameter, determined by the ratio of majorRadius/minorRadius. So, any rx/ry is the same shape, even if the actual number is different. [see Ellipse]
• The rotate parameter specifies rotation.
• The large_arc_flag and sweep_flag, are 1 or 0, booleans. They determine which part of the given ellipse arc specified above is used.

## Rotation

For math detail, see Ellipse

## Large Arc Flag and Sweep Flag

When a line cuts ellipse into 2 arcs, there's a larger arc and a smaller arc. The parameter large_arc_flag specifies which arc to use.

The sweep_flag specifies which side of the path the curve is drawn.

## Understand the Parameters in Depth

The Elliptical Arc command is not intuitive. Here's how to think about it.

• Think of a ellipse E, specified by radiuses rx and ry. This ellipse is positioned in a standard position. That is, the axes are vertical and horizontal.
• Now, think of this ellipse rotated around its center by n degrees.
• Now, think of 2 random points, A and B. These are the start/end points of a line the ellipse needs to connect to. The distance beween these 2 points may be much smaller than the ellipse's minor radius. (but is not larger than 2*majorAxes. (because if it is, the ellipse is automatically scaled up to fit.))
• Now, given the above conditions, you can translate (move, but not change orientation nor scale) the ellipse so that it fits (touches) with the points A B.

## Reference

Paths – SVG 1.1 (Second Edition)#PathDataEllipticalArcCommands

#### SVG tutorial

Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put \$5 at patreon.

If you have a question, put \$5 at patreon and message me.