Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

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.

The <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, <polygon> and <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
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

Online Extras#