SVG for Web Developers

Masking

Whereas clipping paths create hard-edged, cut-out shapes, a mask applied to an object creates the effect of fading the object's edges into the background or seeing the object through a gauzy curtain. Whereas a clipping path uses only the boundaries of a shape to create a cut-out, a mask uses alpha and color values to composite an object into the background. Masks, like <clipPaths>, are container elements that can contain either graphic elements or other container elements. Each masked pixel value can range from fully transparent to fully opaque.

A mask is created by defining a <mask> element in much the same way that a <clipPath> element is defined. The <mask> element is then named with an id attribute so that it can be referenced by ...