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 cubic Bézier curves, but you can also refer to “How to Draw Quadratic Bézier Curves on SVG Images” for a slightly simpler option.
What are Cubic Bézier Curves?
You’ve possibly encountered cubic Bézier curves in desktop publishing and graphics packages. They define a start point (P0) and end point (P3). However, while quadratic curves use one control point, cubic Bézier curves have two: one for each end of the line (P1 and P2). Wikipedia’s Bézier curve page provides a good generation illustration:
The terrifying equations can also be examined at WolframMathWorld.
Cubic Bézier curves provide further possibilities. The two control points can generate curves which reverse direction or wrap around on themselves.
Path Puzzles
Cubic Bézier curves are defined using the C directive in the path’s d attribute:
<path d="M100,250 C100,100 400,100 400,250" />
The initial M directive moves the pen to the first point (100,250). Three coordinates follow the C: the first control point (100,100), the second control point (400,100), and the final ending point (400,250).
You can also use a lowercase c to denote relative rather than absolute coordinates. The following curve would be identical and is possibly easier to code:
<path d="M100,250 c0,-150 300,-150 300,0" />
Finally, there are shorthand S and s directives (as usual, the lowercase option denotes relative rather than absolute coordinates). These accept two further coordinates to string multiple curves together by setting another final point and its associated control point. The starting control point is assumed to be the same as the end control point on the previous curve. For example, take this path:
<path d="M100,250 C100,100 400,100 400,250 S700,400 700,250" />
It draws a curve from 100,250 (control point at 100,100) to 400,250 (control point at 400,100) as above. Another curve is then drawn from 400,250 (control point unchanged at 400,100) to 700,250 (control point at 700,400):
Cubic Bézier curves can be a little difficult to code and visualize, so this quick generation tool will generate the <path> code for you:
See the Pen SVG cubic bézier curve path creation tool by SitePoint (@SitePoint) on CodePen.
Drag the control points on either end of the curve accordingly. Click the curve itself to toggle a fill effect which adds an ending Z directive.
Note that this tool must convert DOM page coordinates to SVG coordinates to ensure it works at all screen sizes. This can be a little more complex than you expect, so refer to “How to Translate from DOM to SVG Coordinates and Back Again” for full details.
If you’d like a slightly easier option, try creating quadratic Bézier curves on SVG images.
Frequently Asked Questions (FAQs) about HTML5 SVG Cubic Curves
What is the difference between SVG cubic Bezier curves and quadratic Bezier curves?
SVG cubic Bezier curves and quadratic Bezier curves are both types of path commands used in SVG graphics. The main difference between them lies in the number of control points they use. A cubic Bezier curve uses two control points, allowing for more complex and flexible shapes. On the other hand, a quadratic Bezier curve only uses one control point, which makes it less flexible but simpler to use.
How can I create a smooth curve using SVG cubic curves?
To create a smooth curve using SVG cubic curves, you need to use the “S” or “s” command. This command allows you to create a smooth cubic Bezier curve by reflecting the control point of the previous curve around the ending point. This ensures that the new curve starts in the same direction as the previous curve ended, creating a smooth transition.
Can I use SVG cubic curves to create complex shapes?
Yes, SVG cubic curves can be used to create complex shapes. By combining multiple cubic curves, you can create intricate designs and patterns. The flexibility of the cubic Bezier curve, with its two control points, allows for a wide range of shapes and designs.
How can I animate SVG cubic curves?
SVG cubic curves can be animated using CSS animations or JavaScript. You can animate various properties of the curve, such as its position, size, color, and even the positions of its control points. This allows for a wide range of dynamic and interactive graphics.
What are some common uses of SVG cubic curves in web design?
SVG cubic curves are commonly used in web design to create complex shapes and graphics, such as logos, icons, and illustrations. They are also used to create interactive graphics and animations, as well as to design user interface elements such as buttons and progress bars.
How can I optimize my SVG cubic curves for better performance?
To optimize your SVG cubic curves for better performance, you can simplify your paths by reducing the number of points and curves. You can also use CSS properties like will-change to hint to the browser about upcoming animations, which can help improve rendering performance.
Can I use SVG cubic curves in responsive web design?
Yes, SVG cubic curves can be used in responsive web design. SVG graphics are vector-based, which means they can be scaled up or down without losing quality. This makes them ideal for responsive design, as they can adapt to different screen sizes and resolutions.
How can I debug or troubleshoot my SVG cubic curves?
Debugging or troubleshooting SVG cubic curves can be done using the browser’s developer tools. You can inspect the SVG elements and their attributes, and modify them in real-time to see the effects. You can also use online tools like SVG path visualizers to better understand and debug your paths.
Can I use SVG cubic curves to create 3D effects?
While SVG is primarily a 2D graphics language, you can create pseudo-3D effects using SVG cubic curves. By manipulating the positions of the control points and using gradients and shadows, you can create shapes that appear to have depth and volume.
Are there any limitations or drawbacks to using SVG cubic curves?
While SVG cubic curves are very flexible and powerful, they can be complex and difficult to work with, especially for complex shapes and designs. They can also be performance-intensive, especially for large graphics or complex animations. However, with proper optimization and good design practices, these issues can be mitigated.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
