"<mask>"

Defines a mask, which is used to apply image-based visibility to graphical elements.

Compared to "<clipPath>", which requires the contents to be paths, "<mask>" masking is performed based on the white and black values of the mask contents.

• DOM object: SVGMaskElement
• SVG2 spec: https://drafts.fxtf.org/css-masking-1/#MaskElement

A <mask> defines a luminance-based soft mask. You fill the <mask> with arbitrary SVG graphics — shapes, gradients, even images — and at render time SVG uses the brightness (luminance) of each pixel of the mask as the alpha value for the corresponding pixel of the masked element. White pixels in the mask leave the target fully visible, black pixels hide it completely, and gray pixels produce partial transparency, so you can author smooth fades and soft edges that "<clipPath>" cannot express.

Declare a <mask> inside "<defs>" with an id, then apply it to any shape via the mask="url(#id)" attribute or CSS property. Reach for <mask> when you need soft edges, gradients of visibility, or image-based cutouts; use "<clipPath>" when a crisp, geometry-only "in or out" clip is sufficient (and faster).

Example usage:

<mask id="MyMask">
 <!-- Things under a white pixel will be drawn -->
 <rect x="0" y="0" width="100" height="100" fill="white" />
 
 <!-- Things under a black pixel will be invisible -->
 <circle cx="50" cy="50" r="40" fill="black" />
</mask>

To reference it with the mask attribute:

<rect mask="url(#MyMask)" width="100" height="100" fill="green" />

This draws a green rectangle with a circle cut out of the middle of it.

Attribute	Default	Description
x	-10%	Top-left X coordinate of the mask region.
y	-10%	Top-left Y coordinate of the mask region.
width	120%	Width of the mask region.
height	120%	Height of the mask region.
maskUnits	objectBoundingBox	Coordinate system for x, y, width, and height. Either userSpaceOnUse or objectBoundingBox.
maskContentUnits	userSpaceOnUse	Coordinate system for the contents of the mask. Either userSpaceOnUse or objectBoundingBox.