The article “How to Create Complex Paths in SVGs” examined the <path> element and showed how to draw a series of lines and arcs to create any shape. (It’s often used to replicate fonts without requiring a full font download.)
The d attribute offers a couple of extra tricks to draw smooth curves. In this article, we’ll discuss quadratic Bézier curves, but you can also refer to “How to Draw Cubic Bézier Curves on SVG Images” for a more complex option.
What are Quadratic Bézier Curves?
A quadratic curve has a start point (P0) and end point (P2). A single control point (P1) determines the curvature of the line. Wikipedia’s Bézier curve page provides a good generation illustration:
Image source
Math ninjas can also examine the migraine-inducing equations at WolframMathWorld.
Quadratic curves are great for drawing smooth edges. As you can see from this image, it’s easy to specify a control point where a squared edge would normally appear:
Continue reading How to Draw Quadratic Bézier Curves on HTML5 SVGs on SitePoint.
