• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part: II Manipulating SVG > Masking and Clipping

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 rectangle to a complex series of unique paths. Clipping paths do not have the smooth transitions and blending that masking allows; instead, clipping paths are hard edged. Either content shows through (in the case of the inner area of the clipping path data) or it doesn't (in the case of any area outside of the path).

To introduce you to both of these methods, this hour will teach you the following:

  • What clipping and masking are

  • How to create a mask

  • How alpha channels and artwork affect a mask

  • How to create a clipping path

With these concepts, you will be capable of quickly performing some amazing modifications to your artwork without actually altering the existing artwork.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint