Quadratic Bezier Curves

Quadratic Bezier Curves are similar to the Cubic Bezier curves, but instead have only a single control point. The Q (or q) and T (or t) commands create them.

Quadratic bezier curves has two commands:

Command	Parameters	Description
Q/q (quadratic Bezier curveTo)	x1, y1 x, y	Draw a quadratic Beizer curve from the current point to (x,y) using (x1, y1) as the control point.
T/t (shorthand/smooth quadratic Bezier CurveTo)	x, y	Draw a quadratic Beizer curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point.

Here shows how a quadratic bezier curve is drawn:

1. A curved path is defined from the current position (mx,my) (either established by a Move command or a previous line or curve command) to the end point (x, y) defined in the quadratic bezier.

2. The control point (x1,y1) defines the bezier control points that give the shape of the curve. The positioning of the control point can change the shape of the curve under the user's control.

Code Example	SVG Image
<?xml version="1.0" standalone="no"?>	Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150" height="250">
<!-- Curve 1 --> <path d="M20,50 Q40,5 100,50" style="fill:none; stroke:blue"/>
<!-- Curve 2 --> <path d="M20,90 Q40,50 60,90 T100,90" style="fill:none; stroke:green"/>
<!-- A Heart --> <path d="M50,150 Q1,125 30,180 T80 175 T50 150" style="fill:pink; stroke:red"/>
</svg>