Paths

Paths are the most powerful curves in SVG. You can draw almost everything. We will concentrate on attempting to draw smooth curves, and leave the other possibilities to the references. For example, SVG Essentials has more complete description of paths.

Quadratic Bézier Curves

The quadratic Bézier curve determined by points A, B and C is the unique curve of the form c(t)=(p₁(t), p₂(t)) satisfying the following statements:

• Both p₁ and p₂ are polynomials of degree two.
• c(0)=A and c(1)=C.
• c'(0)=2(B-A) and c'(1)=2(C-B).

I would use a quadratic Bézier curves to a approximate an arc of a smooth curve. In this case, A and C would be the endpoints of the arc, and B would be the line at the intersection of the tangent vectors.

The following attempts to approximate a circle using four quadratic Bézier curves. The approximation is not so good, but it would improve if you approximated by more quadratic Bézier curves.

1: <svg version="1.1" baseProfile="full"
2:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
3:      width="300px" height="300px" viewBox="-150 -150 300 300">
4: 
5:    <circle cx="0" cy="0" r="150" fill="yellow" stroke-width="0px"/>
6:    <path d="M 150,0 Q 150,150 0,150 Q -150,150 -150,0 Q -150,-150 0,-150 Q 150,-150 150,0" 
7:       stroke="black" stroke-width="1px" fill="none"/>
8: 
9: </svg>

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300px" height="300px" viewBox="-150 -150 300 300">

   <circle cx="0" cy="0" r="150" fill="yellow" stroke-width="0px"/>
   <path d="M 150,0 Q 150,150 0,150 Q -150,150 -150,0 Q -150,-150 0,-150 Q 150,-150 150,0" 
      stroke="black" stroke-width="1px" fill="none"/>

</svg>

The important attribute above is the the d attribute of the path. The following describes what it means:

• The portion M 150,0 means "move to the point (150,0).
• The portion Q 150,150 0,150 means "draw a quadratic Bézier curve with first point (150,0) (where we moved to), second point (50,150) and ending at (0,150).
• The portion Q -150,150 -150,0 continues from the last point (0,150) and gives an arc terminating at (-150,0).
• The portion Q -150,-150 0,-150 continues to (0,-150).
• The portion Q 150,-150 150,0 closes the curve.

Cubic Bézier Curves

The quadratic Bézier curve determined by points A, B, C and D is the unique curve of the form c(t)=(p₁(t), p₂(t)) satisfying the following statements:

• Both p₁ and p₂ are polynomials of degree two.
• c(0)=A and c(1)=D.
• c'(0)=3(B-A) and c'(1)=3(D-C).

I will explain how to use this to approximate a parameterized curve ɣ(t)=(x(t),y(t)). Let t_j<t_j+1. To approximate the arc between these points we use A=ɣ(t_j) and D=ɣ(t_j+1). We would also define

The following uses a cubic Bézier curves to approximate a quarter of a circle:

1: <svg version="1.1" baseProfile="full"
2:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
3:      width="300px" height="300px" viewBox="0 300 300 300">
4: 
5:    <circle cx="300" cy="300" r="300" fill="yellow" stroke-width="0px"/>
6:    <path d="M 0,300 C 0,457.07963268 142.920367,600 300,600" stroke="black" stroke-width="1px" fill="none"/>
7: 
8: </svg>

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300px" height="300px" viewBox="0 300 300 300">

   <circle cx="300" cy="300" r="300" fill="yellow" stroke-width="0px"/>
   <path d="M 0,300 C 0,457.07963268 142.920367,600 300,600" stroke="black" stroke-width="1px" fill="none"/>

</svg>

Other things which can be drawn

We have demonstrated how to draw quadratic and cubic Bézier curves. You can also draw line segments and arcs of circles and ellipses. We refer the reader to the references below. We also point out that the curves can be disconnected.

References on paths:

• SVG Essentials' description of paths.
• Wikipedia's entry on Bézier Curves.
• W3C's description of the path element.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.