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