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

Compared to <clipPath>, which clips against geometry from paths and shapes, <mask> visibility is computed from rendered mask content using luminance or alpha coverage.

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

A <mask> defines a soft mask. By default, SVG uses each rendered pixel's luminance multiplied by its alpha as mask coverage. mask-type: alpha uses only the alpha channel. White pixels in a luminance 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:

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.
mask-type	luminance	Coverage source. Either luminance or alpha.