An example of the SVG quadratic curve path option

Posted on 13th June 2017

Summary
If the SVG quadratic curve path option is flummoxing you then this page shows you how to use it.

Edit: Originally this article talked about bezier curves - but it's actually quadratic curves.

This is an interactive example of the SVG quadratic curve path option. You can drag the points around and see the effect that it has on the curve. The path is shown in the text box underneath the SVG tag.

P0 P1 P2

So what's happening here?

I suppose you'll want to know. I guess I should explain a bit. Ok the path is shown in the text box above - lets take a look at this path: M 100 400 Q 400 50 800 400. The first thing that's done is a moveTo - followed by two numbers which are used as the set of coordinates to move to.

Then comes the good bit - a Q option which draws a quadratic curve. This type of curve takes 4 numbers as arguments. The first two are used as coordinates for the control point (P1 in the example above).

And the last two are used as coordinates for the end point of the curve - P2 in the example above.

As you can see the curve doesn't pass through the center point (P1) - it's just a control point that defines the curve.