This SVG example demonstrates how to create a simple arc path. The letter M represents a move to operation that sets the first endpoint or the position from which to start drawing. Before we begin the arc path, we always have a position to start at. After the A, which begins the the arc, we have the two radii for the x and y directions. If these values are equal, then the arc is circular. Otherwise, it is elliptical.

After the radii, are three flags values that are either 0 or 1:

• Rotation Transformation (always zero)
• Large Arc
• Left Arc

The final two values are the coordinates the second endpoint of the arc.

SimpleArcPath.svg

<svg width="250px" height="420px" xmlns="http://www.w3.org/2000/svg">
  <path d="M 100 20 A 100 200 0 1 0 150 20" fill="none" stroke="indigo" 
    stroke-width="5"/>
</svg>

Output