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 15
Less Is More: Clipping and Masking

This chapter looks at clipping and masking, two methods for removing pieces from a graphic layer, making it partially transparent.

Clipping and masking are often confused. Many visual effects can be achieved by either a clip or a mask. But there are important differences.

Clipping is a vector operation. It uses a clipping path that always references a geometrical shape, and creates a cleanly cut result. Parts of the graphic are either inside or outside the clipping path: there are no halfway measures.

Masking is a pixel operation. The masks that it uses are variable-strength image layers (typically grayscale) that define the amount of transparency at each point. The variation means that a mask can smooth or “feather” the edges of the transparency effect, creating semitransparent sections and blurred edges.

Both options have well-supported SVG definitions (using the <clipPath> and <mask> elements), as well as newer CSS shorthand approaches. The CSS-only versions were designed as extensions of the SVG methods, not as competitors. Both versions are intended to apply to both SVG elements and CSS-styled HTML elements. However, browser implementations have been erratic, updating the SVG and CSS rendering code separately.

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 15-1. An SVG face, and versions of it made transparent with fill-opacity and stroke-opacity (center) or with opacity (right)
Figure 15-2. A clipped graphic is constructed from a graphic (here, a photograph) and a vector clipping path (here, a triangular polygon)
Figure 15-3. An incomplete Venn diagram, without the intersection section
Figure 15-4. A misaligned Venn diagram, caused by clipping a <use> element directly
Figure 15-5. A solid-color Venn diagram, created with clipping paths
Figure 15-6. A solid-color Venn diagram, created with clipping paths
Example 15-1. Using clipping paths to draw a patterned Venn diagram
Figure 15-7. A three-circle Venn diagram
Figure 15-8. A gradient-filled rectangle, clipped to two overlapping circles
Figure 15-9. HTML elements (and CSS pseudoelements) and an SVG image, all clipped by the same object bounding-box clipping path
Example 15-2. Creating curved boxes, in SVG and HTML, with object bounding-box clipping paths
Figure 15-10. HTML and SVG elements clipped to the same CSS polygon clipping path
Figure 15-11. A masked graphic is constructed from a full-color graphic (here, a photograph) and a single-channel mask image (here, an arrangement of grayscale gradients)
Figure 15-12. The object bounding-box mask stretches to fit masked images of different dimensions
Figure 15-13. An object bounding-box mask applied to SVG text
Figure 15-14. The photograph that will be used to create the duotone
Figure 15-15. Duotone effects created from a photographic mask on SVG rectangles
Example 15-3. Creating a duotone photograph with a mask
Figure 15-16. A sepia photograph, with vignette corners, created with SVG masks
Example 15-4. Creating a duotone photograph with a mask
CSS Masking versions of examples (from the “Easier Image Masks” Future Focus sidebar)
Figure 15-X1. Part of a map of Canada made from clipped images, with hover effects.
Figure 15-X2. The image arrangement from the map of Canada, with clipping paths removed.
Example 15-X1. Using a clipped image to create an image-filled shape

Photographs by Flickr users laszlo-photo, hern42, and mybulldog; used under a Creative Commons licence.

Figure 15-X3. Video-filled text, or something that looks like it, anyway
Example 15-X2. Using a mask to create a text window to an HTML video

Online Extras#