SVG - Arc Paths

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

Arcs are a form of path specification that allows one to specify portions of circular arc paths. The arcs are specified inside the path tags. Inside the path tag, we begin with a M that indicates a move-to that specifies the coordinates of where to begin drawing. The a or arc command is followed two numbers that indicate the "radii" in the x and y directions. The next number, which is zero in all of the examples, indicates a potential rotation transformation; the value does not seem to work on most browsers. The next two values can be 0 or 1 and are flags that indicate whether to use the large arc and the left side arc, respectively. These values are varied to show what they mean in examples below. The last two values are the coordinates of the second endpoint of the arc, relative to the orginal coordinates in the move-to.

Note that the use of uppercase letters indicates absolute coordinates, while lowercase letters indicate relative values. This is why in path d="M 200 200 a 100 100 0 0 0 -100 -100" the 200, 200 is absolute and the -100, -100 is relative to that. Also, the outermost g tag specifies a translation transform that applies to all of the elements that are inside of it.

SvgArcPaths.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's HTML</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="730" height="380">
    <g transform="translate(10,10)">
      <path d="M 100 100 a 100 100 0 0 0 100 100" fill="none" stroke="#FF0000" stroke-width="1"/>
      <path d="M 100 100 a 100 100 0 0 1 100 100" fill="none" stroke="#00FF00" stroke-width="1"/>
      <path d="M 100 100 a 100 100 0 1 0 100 100" fill="none" stroke="#0000FF" stroke-width="1"/>
      <path d="M 100 100 a 100 100 0 1 1 100 100" fill="none" stroke="#000000" stroke-width="1"/>
      <g fill="#999999" stroke="#999999">
        <line x1="100" y1="100" x2="190" y2="190" stroke-width="3" />
        <polygon points="200,200 195,185 190,190 185,195" stroke-width="0" />
      </g>
      <text x="190" y="30" fill="#000000">1 1</text>
      <text x="160" y="100" fill="#00FF00">0 1</text>
      <text x="110" y="200" fill="#FF0000">0 0</text>
      <text x="90" y="325" fill="#0000FF">1 0</text>
      <text x="0" y="360" fill="#999999">path d="M 100 100 a 100 100 0 * * 100 100"</text>
    </g>

    <g transform="translate(400,10)">
      <path d="M 200 200 a 100 100 0 0 0 -100 -100"
        fill="none" stroke="#FF0000" stroke-width="1"/>
      <path d="M 200 200 a 100 100 0 0 1 -100 -100"
        fill="none" stroke="#00FF00" stroke-width="1"/>
      <path d="M 200 200 a 100 100 0 1 0 -100 -100"
        fill="none" stroke="#0000FF" stroke-width="1"/>
      <path d="M 200 200 a 100 100 0 1 1 -100 -100"
        fill="none" stroke="#000000" stroke-width="1"/>
      <g fill="#999999" stroke="#999999">
        <line x1="200" y1="200" x2="110" y2="110" stroke-width="3" />
        <polygon points="100,100 105,115 110,110 115,105" stroke-width="0" />
      </g>
      <text x="190" y="30" fill="#0000FF">1 0</text>
      <text x="160" y="100" fill="#FF0000">0 0</text>
      <text x="110" y="200" fill="#00FF00">0 1</text>
      <text x="90" y="325" fill="#000000">1 1</text>
      <text x="0" y="360" fill="#999999">path d="M 200 200 a 100 100 0 * * -100 -100"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Arc Paths

SvgArcPaths.html

Output