From the course: SVG: Clipping, Masking, and Filters

How clipping and masking works

From the course: SVG: Clipping, Masking, and Filters

Start my 1-month free trial

How clipping and masking works

“

- [Instructor] Within an SVG, you can declare clip path and mask elements, allowing you to clip, meaning show only what's inside this shape, or mask, meaning show only what's in the white areas of this particular alpha layer, in the graphic element. In the case of clipping, a clip path element is declared in the defs section of the SVG, and within that clip path element, the actual clipping shapes are declared using standard SVG elements, like rect, ellipse, path, text, et cetera. The clip path elements remain invisible, and only become active when referenced from a visible element. When referenced, they literally clip the original graphic, so only the elements which are overlapped by the clip path elements are visible. Masking works a little bit differently. Here, the mask element contains elements that are either black or white or a combination, which are composited onto the current graphic element. Anything in the current graphic element, which appears under a white area of the mask, is visible. Anything under the black area of the mask is invisible, so in effect, you get a punch-through of the original graphic. In this chapter, we'll take a quick look at both clipping and masking and how they work in practice.

Contents