In SVG, you can specify that any other graphics object or <g> element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the <mask> element. A mask is used/referenced using the mask property.

Usage context

CategoriesContainer element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>


Global attributes

Specific attributes

DOM Interface

This element implements the SVGMaskElement interface.



<?xml version="1.0"?>
<svg width="200" height="80" viewBox="0 0 200 80" version="1.1"

    <mask id="myMask" maskUnits="userSpaceOnUse"
        x="0" y="0" width="200" height="80">
      <rect x="0" y="0" width="100" height="80" fill="white"/>

    <text id="Text" x="100" y="48" font-size="26" font-weight="bold"
      Black & White

  <!-- Draw black rectangle in the background -->
  <rect x="100" y="10" width="95" height="60" />
  <!-- Draw the text string twice. First, the white text without mask.
       Second, the black text with the mask applied-->
  <use xlink:href="#Text" fill="white"/>
  <use xlink:href="#Text" fill="black" mask="url(#myMask)"/>



Specification Status Comment
CSS Masking Module Level 1
The definition of '<mask>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<mask>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

See also

Document Tags and Contributors

 Contributors to this page: mattwojo, Sebastianz, flashadicts, kscarfone, Jeremie
 Last updated by: mattwojo,