Conclusion

The <path> element is the most versatile drawing element in SVG, and its commands are not difficult to master. Here you've seen how to create straight lines, vertical lines, horizontal lines, and curves. You've learned that paths can be either open or closed and that there are three different types of curves that are created with path data: elliptical arcs, and cubic and quadratic Bèzier curves.

For any kind of complex drawing, it is necessary to use the <path> element. Before exporting drawings made in a drawing package, take a look at the SVG. You'll see a lot of the <path> elements in the code. That's why it's so useful to become familiar with the whole concept and coding of paths.

Challenge 1

To feel comfortable with the <path> ...

Get SVG for Web Developers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.