Clipping, masking, and compositing

Windows Internet Explorer 9 introduced support for SVG clipping, clip paths, masking, and opacity as specified in the Clipping, Masking, and Compositing module of the SVG 1.1 (Second Edition) specification. (SVG paths are discussed in the Paths section of this document.)

Clipping

A clipping path cuts or “clips” the area that a color, pattern, or image can be drawn. All parts of the graphical element that lie outside the clipping path are not drawn. Clipping paths are fully opaque; the portion of the graphical element that is outside the clipping path is completely invisible.

In SVG, the overflow and clip properties establish initial clipping paths, or shapes in which content will be displayed. By default, the initial clipping path is defined as the SVG viewport, or the rectangular area of the page where the SVG content is displayed.

The clipPath element defines a clipping path. The clipping path is then referenced using the clip-path property. The clip-rule property applies to graphic elements within a clipPath element, and the clipPathUnits attribute defines a coordinate system for the contents of the clipPath. Clipping paths can be applied to text as well as colors, patterns, and images.

Clipping functionality can be accessed programmatically with the SVGClipPathElement DOM interface.

Following is a simple example of an SVG clipping path.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
 <clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
 </clipPath>
 <rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
 </svg>

This example uses the clipPath element to define a clipping path in the shape of a circle. The clip-path property is then used to apply the clipping path to a rectangle. This produces the following in Internet Explorer 9.

Masking

A mask is similar to a clipping path, except it is semi-transparent. Masks are often used for compositing foreground objects into the current background.

The mask element defines a mask. The mask is then referenced using the mask property.

The following is a simple example of an SVG mask.

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
 </svg>

This example uses the mask property to define a mask in the shape of three adjacent circles with different colors. The mask property is then used to apply the mask to a purple rectangle. This produces the following in Internet Explorer 9.

Related topics

SVG