Lines and Arcs with SVG

A case study on creating lines and arcs using SVGs

by Christopher McCulloh

HTML

<h1>
Lines and Arcs in SVG
</h1>
<p>
Simple "round" arc
</p>

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">

  <style>
    text { font: 13px sans-serif; }

    .red { fill: red; }
    .blue { fill: blue; }
  </style>

<!-- the box -->
<path d="M80 80 H220 V 220 H 80 Z" fill="transparent" stroke="grey"/>
<!--

M80 80 H220 V 220 H 80 Z
M[X Y] H [X] V [Y] H [X] Z

M80 80 = Move the cursor to 80x 80y
H 220 = draw a path Horizontally to 220x (cursor now at 220x 80y)
V 220 = draw a path Vertically to 220y (cursor now at 220x 220y)
H 80 = draw a path Horizontally to 80x (cursor now at 80x 220y)
Z = draw a path back to the starting position (cursor now back at 80x 80y)

-->

<!-- the arc -->
<path d="M100 100 C 100 200, 200 200, 200 100" stroke="black" stroke-width="2" fill="transparent"/>
<!--

M100 100 C 100 200, 200 200, 200 100
M[Ax Ay] C [Bx By], [Cx Cy], [Dx Dy]

M100 100 = Move the cursor to x100 y100. This is point A in the illustration.
C = We are going to start an arc
100 200 = consider x100 y200 to be the "control point" for the first part of the arc. This is akin to the little handles you move around in a vector drawing program. This is point B in the illustration and is the "handle" for point A
200 200 = consider x200 y200 to be the "control point" for the second part of the arc. This is point C in the illustration and again represents the "handle" for point D
200 100 = the end of the arc. This is point D in the illustration.
-->

<!-- the arc start and end point circles -->
<circle cx="100" cy="100" r="5" fill="red"/>
<circle cx="200" cy="100" r="5" fill="red"/>

<!-- the arc "handles" -->
<circle cx="100" cy="200" r="5" fill="blue"/>
<path d="M100 200 V 100" stroke="blue"/>
<circle cx="200" cy="200" r="5" fill="blue"/>
<path d="M200 200 V 100" stroke="blue"/>

  <!-- the arc letters -->
  <text x="106" y="104" class="red">A</text>
  <text x="106" y="204" class="blue">B</text>
  <text x="206" y="204" class="blue">C</text>
  <text x="206"...