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
<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
- 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
- “Clipped Clicks”: Clipping paths were designed to work with interactive effects. Just watch out for the browser support.
- “Clipping on the Outside, with a Mask”: Sometimes a clipping path is the opposite of what you need. And sometimes a mask is the secret to effects you didn't think possible.
- Reference: SVG Elements and Attributes
- Reference: CSS Shape Functions