Chapter 6 Following Your Own Path: Custom Shapes
A complete vector drawing format requires a way to draw arbitrary shapes and curves. The basic shape elements introduced in Chapter 5 may be useful building blocks, but they are no more flexible than CSS layout when it comes to crafting custom designs.
<path> element is the drawing toolbox of SVG. With
<path> you can draw shapes that have straight or curved sections (or both), open-ended lines and curves, disconnected regions that act as a single shape, and even holes within the filled areas.
Understand paths, and you understand SVG.
The other custom shapes,
<polyline>, are essentially shorthands for paths that only contain straight line segments.
This chapter introduces the instruction set for drawing custom shapes step by step, creating the outline by carefully plotting out each line segment and curve. For icons and images, it is relatively rare to write out the code this way, as opposed to drawing the shape in a graphics editor. With data visualization and other dynamically generated graphics, however, programmatically constructing a shape point by point is common, so learning the syntax is more important.
Even within graphic design, there will be times when you want to draw a simple, geometrically precise shape. Using SVG custom shapes, you can often do this with a few lines of code, instead of by painstakingly dragging a pointer around a screen.
In other situations, you will want to edit or duplicate a particular section of a shape or drawing. By the end of this chapter, you should have enough basic familiarity with how paths work to safely open up the code and start fussing.
Figures and Examples#
The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.
View all files for this chapter on GitHub.
- Figure 6-1. A diamond drawn with straight-line path segments
- Figure 6-2. An open-path diamond shape, with a thick stroke
- Figure 6-3. A closed-path diamond shape, with a thick stroke
- Figure 6-4. A diamond drawn with a cut-out subpath region
- Example 6-1. An SVG diamond icon using a multipart path
- Unlabelled figure in the “Polygon Points” CSS versus SVG sidebar
- Figure 6-5. String art “curves” created from SVG lines
- See Figure 5-2 in Chapter 5.
- Figure 6-6. A quadratic Bézier path, and the string art mesh that encloses it
- Figure 6-7. A curve made of two quadratic segments, with the control point reflected from the first segment to the second
- Figure 6-8. A heart drawn with quadratic Bézier curves, showing the control points
- Example 6-2. An SVG heart icon using quadratic Bézier curves
- Figure 6-9. A curve made from two cubic Bézier segments, showing the control points
- Figure 6-10. A spade drawn with cubic Bézier curves, showing the control points
- Example 6-3. An SVG spade icon using cubic Bézier curves
- Figure 6-11. The many ways to connect two points with a coffee mug stain
- Figure 6-12. A club drawn with path arc commands, showing the underlying geometry
- Example 6-4. An SVG club icon using arcs
- Figure 6-X1. Four suspiciously identical shapes, with evenodd fill
- Example 6-X1. Defining paths with winding order in mind
- Figure 6-X2. Four similar-but-not-identical shapes, with nonzero fill
- Figure 6-X3. Four no-longer identical shapes, with nonzero fill, showing the winding order calculations
- Figure 6-X5. Cubic Bézier curves and their “string art” basis
- Live SVG file, line-art-bezier-cubic.svg. The curve is set with hash or query parameters in the URL:
- Animated SVG file, line-art-bezier-cubic-animated.svg; Again, change the curve in the URL:
- Combined PNG screenshot, line-art-bezier-cubic.png
- From the “Calculating Cubic Béziers” extra article.
- “The Winding Order of the Fill Rule”: What do the nonzero and evenodd keywords mean, and how do they relate to the shape of your path?
- “Calculating Cubic Béziers”: Connecting the control points to the cubic curve.
- Reference: Path Commands
- Reference: CSS Shape Functions
- Reference: SVG Elements and Attributes