O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required