Understanding the Cubic Bézier Curve in SVG

For this demonstration, we’ll be using a simple line. In order to add a curve to this line we need to use the <path> element. Let’s add it to our SVG:

<path d="M 150,150 L350,150"></path>

The d attribute defines its actual path in the SVG coordinate system. Inside the string we see numbers and letters. The most important thing to remember here is that uppercase letters means absolute positions while lowercase means relative to the current position (reading left to right).

We start by placing the original position using the Move command “M” to location [150,150] and then the Line command “L” to the location [350, 150].

For demonstration purposes, I’ll add some markers to show the location of the anchor points.

In order to create a curve like this, we need to understand a bit more of the syntax of the path’s d attribute.

The Cubic Bézier curve command starts with “C” (or “c” for relative positions) and consists of four coordinates:

• Start position (this one is implied in the SVG syntax)
• Location of first Bézier handle
• Location of second Bézier handle
• End position

<svg>
  <path d="M 150,150 C 180,50 320,50 350,150">
</svg>

The “start position” is wherever the last operation ends, and as in the first example, this is where we moved to using the Move command (“M”).

And after the “C” you can see there are three more locations, where the last one is [350,150] - the same locations as before.

Here you can see the locations of the Bézier handles.

Here you can what happens if we change the position of one of the Bézier handles.

… or over here on the left.

Try and drag the handles to see what happens.