Masking in SVG

By mbystedt on Feb 27, 2014, 9:41:11 PM

Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define the mask. The default state of a mask is fully transparent black. Therefore, you must add graphics to the mask for anything to show of the masked item. Adding non-black graphics to the mask creates areas with an opacity related to how bright (white) the graphic is. Any graphic element or grouping element can be added to a mask.

The unique id required to reference this mask.
Set whether the clipping plane is relative the full view port or object. See: x, y, width, height. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'objectBoundingBox')
Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')
x, y
The clipping plane of the mask. (default: -10%)
width, height
The clipping plane of the mask. (default: 120%)
The 'mask' element

Masks are used by adding the mask attribute to any shape or container tag. The attribute references the mask by its id.

  <mask id="circleMask" maskUnits="objectBoundingBox" x="0" y="0" width="1280" height="600">
    <rect x="0" y ="0" width="1280" height="600" fill="url(#myRadGrad)"/>
    <text x="640" y="210" font-size="300" fill="white" text-anchor="middle">Delicious</text>
    <text x="640" y="590" font-size="300" fill="white" text-anchor="middle">FOOD</text>
<!-- Mask Sample -->
<g transform="translate(0,300)">
  <image x="0" y="0" width="1280" height="600" 
    mask="url(#circleMask)" xlink:href="maskFood.jpg" />
  <text x="640" y="210" font-size="300" fill="none" stroke="black" stroke-width="4" text-anchor="middle">Delicious</text>
  <text x="640" y="590" font-size="300" fill="none" stroke="black" stroke-width="4" text-anchor="middle">FOOD</text>
Example 1. Use of a mask with a gradient to fade an image. (Download)

One gotcha with masks is that the position of the mask is not linked to object. Transforms are very useful here as they can move and scale the object and its mask together.

Color Luminosity

The luminosity of the color at a pixel determines how opaque the pixel will be. White is the most luminous color and black is the least luminous. Thus, the highest luminosity value, white, is opaque and the lowest, black, is transparent. This is backwards to physics (black absorbs all light) but matches how you define colors and mixing fractions of the new color with the colors below.

Example 2. The relative luminosity of colors. (Download)

What is a color's luminosity? It is a value which says how "bright" a color is. If you only use grayscale colors for the mask you can just say it's the percentage of how white it is. Most graphic programs like Adobe Photoshop(tm) use this method.

SVG allows any color to be used in a mask. How you turn red or blue or even grayscale colors into a luminosity isn't that easy. You have to deal with how eyes perceive colors. Blue is less luminous than green so rgb(0,255,0) is more luminous than rgb(0,0,255). SVG uses 21.2% red, 71.5% green and 7.2% blue to calculate the luminance.

Filter Equivalent

The feColorMatrix filter with the type attribute set to 'luminanceToAlpha' acts as a mask.

Related Topics