# SVG Path: Elliptical Arc

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

and `a`

.

- If you don't know path basics, see: SVG Path Tutorial.
- If you don't know SVG basics, see: SVG: Basic Examples.

## Basic Parameters

`A`

= Draw a elliptical arc from the current point to`rx``ry``rotate``large_arc_flag``sweep_flag``x``y``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

Like what you read? Buy JavaScript in Depth
♥