Using SVG with CSS3 and HTML5

Chapter 15. Less Is More

Chapter 15. Clipping and Masking

The graphical effects we’ve covered in the past few chapters have applied effects to individual shapes or text elements, changing the way the vectors are painted into pixels. The effects we’ll cover in this chapter (clipping and masking) and the next one (filters and blend modes) are layer effects: they can apply to single shapes, but also to composited groups, <image> elements in SVG, or—with browser support limitations—to non-SVG elements styled with CSS.

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 ...