Hour 9. Masking and Clipping

In the design world, masking can refer to a variety of concepts. Generally, in most drawing tools, “masking” is similar in concept to a keyhole—a mask is a shape that reveals content below through its inner shape but prevents the same content from appearing outside its shape.

However, in SVG, “masking” refers to something more akin to a photo-imaging program's definition of it. In an SVG “mask,” the amount of content revealed beneath the mask is based on the color value of the pixels in the mask. In other words, as the color value across the mask changes, so too changes the visibility of the image masked.

To handle the “keyhole” concept, SVG uses “clipping paths.” These objects can range in complexity from a simple ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.