What Are Bezier Curves?

---

Rendering a Quadratic Bezier Curve

Consider the quadratic Bezier curve rendered in Figure 5.1.

Figure 5.1: A quadratic Bezier curve.

The SVG document in Listing 5.1 demonstrates how to use the SVG path element in order to render a quadratic Bezier curve.

Listing 5.1 quadraticBezier1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="800" height="400"> <g transform="translate(50,50)">     <path d="m20,20 Q100,0 200,200 T340,240 z"      fill="black"      stroke-dasharray="2 2 2 2"      style="stroke:blue;stroke-width:4;"/>     <path d="m0,0 Q100,0 200,200 T300,200 z"      fill="red"      stroke-dasharray="2 2 2 2"      style="stroke:blue;stroke-width:4;"/> </g> </svg>

Remarks

The SVG code in Listing 5.1 contains an SVG g element that translates the origin from the point (0,0) to the point (50,50). Next, the SVG path element specifies a red quadratic Bezier curve whose blue outline has a width of four. The presence of a term such as 'Q100,0 ' or 'q100,0' lets you know that you're dealing with a quadratic Bezier curve. Let's take a look at the code that specifies the Bezier curve:

<path d="m0,0 Q100,0 200,200 T300,200 z"

The starting point of the second Bezier curve is the origin because of the term m0,0. Next, the fragment Q100,0 200,200 specifies the control point at the point (100,0), and it draws a quadratic Bezier curve from the current point-which is the origin-to the point (200,200) using the point (100,0) as the control point. Next, the term T300,200 draws a quadratic Bezier curve from the point (200,200) to the point (300,200). Note that the control point for the T term is the reflection of the previous control point (100,0) relative to the point (200,200), which is the point (400,300). Finally, the term z connects the point (300,200) to the initial point (0,0) with a line segment.

Note that the uppercase letters M, Q, and T in a quadratic Bezier curve refer to absolute points whereas the lowercase letters m, q, and t refer to relative points.

The first Bezier curve shows how you can create interesting 'asymmetric' shadow effects by manipulating the control points as demonstrated in the code.

---