Tutorial SVG 8 Clipping and Masking

SVG Clipping and Masking

Using the <clipPath> element you can create shapes that act as a mask for the underlying image, text, or other content. The <mask> element works just like that but is slightly more flexible (but more complex) to use. Before we discuss the two new elements we look back to the stop-opacity attribute in tutorial 7, which can be used for masking purposes as well.

Example 1: the stop-opacity attribute and masking

<defs> 
<rect id="rect1" x="0" y="0" width="150px" 
height="150px" /> 
<radialGradient id="a" > 
<stop offset="0" stop-opacity="0"/> 
<stop offset="1" stop-color="white"/> 
</radialGradient> 
</defs> 
<image xlink:href="..images/coworker1.jpg" 
x="0" width="100%" y="0" height="100%" /> 
<use xlink:href="#rect1" fill="url(#a)"/>
 

Example 2: flag of the Replublic of South Africa (RSA) in SVG format

<svg width="150" height="100">
<defs>
<g id="flagRsa">
<polygon fill="#E23F29" points="80.333,33.306 
30.5,0 149.959,0.041 150,33.306"/>
<polygon fill="#FBB516" points="0,7.494 
64.417,49.875 0,93.339"/>
<polygon fill="#087D5A" points="0,11.99 
0,0 18.354,0.021 77.722,40.022 150,39.987 
149.959,59.992 77.834,59.95 18.333,99.917 
0,99.917 0,87.927 56.5,49.958"/>
<polygon fill="#2B3382" points="30.5,99.917 
80.278,66.556 149.944,66.667 150,100"/>
<polygon fill="#010101" 
points="0,20.149 44.667,49.958 0,79.934"/>
</g>
</defs>
<use xlink:href="#flagRsa" x="0" y="0" />
</svg>

Example 2.1: clipping and masking the flag of RSA

Clipping

<clipPath id="flagPath">
    <circle cx="75" cy="50" r="50"/>
</clipPath>

<use xlink:href="#flagRsa" x="0" y="0" 
     clip-path="url(#flagPath)"/>

Masking

<Mask id="flagMask">
    <circle cx="75" cy="50" r="50" fill="white"/>
</Mask>

<use xlink:href="#flagRsa" x="0" y="0" 
     mask="url(#flagMask)"/>

Example 2.2: what you can do with masking and cannot with clipping

2.2.1. Filter out colors. The color that a mask filters out is defined by the fill color of the shapes that are used inside of the mask. When the color white is used in the mask, as in the circle in this example, then no colors are filtered out. When the color black is used in the mask, then all of the colors are filtered out, and none of the underlying masked graphic is displayed on the screen.

<Mask id="flagMask">
    <circle cx="75" cy="50" r="50" 
	 fill="LightSlateGray "/>
</Mask>

<use xlink:href="#flagRsa" x="0" y="0" 
     mask="url(#flagMask)"/>
<Mask id="flagMask">
    <circle cx="75" cy="50" r="50" 
	 fill="DarkSlateGray"/>
</Mask>

<use xlink:href="#flagRsa" x="0" y="0" 
     mask="url(#flagMask)"/>

2.2.2 Using a gradient in the mask. This can be a radial gradient or a linear gradient. But remember: the gradient fill of a mask (as explained in example 2.2.1 above) works different than the gradient fill of a shape or path

A mask with a gradient fill.

<linearGradient id="black" >
    <stop offset="0.0" stop-color="white"/>
    <stop offset="1" stop-color="black"/>
</linearGradient>
<mask id="flagMask">
	<circle cx="75" cy="50" r="50" 	
	fill="url(#lineairGradientMask)" />
</mask>

<use xlink:href="#flagRsa" x="0" y="0" 
     mask="url(#flagMask)"/>

A more delicate gradient fill.

<linearGradient id="black" >
    <stop offset="0.0" stop-color="white"/>
    <stop offset="1" stop-color="DarkSlateGray "/>
</linearGradient>
<mask id="flagMask">
	<circle cx="75" cy="50" r="50" 	
fill="url(#lineairGradientMask)" />
</mask>
<use xlink:href="#flagRsa" x="0" y="0" 
     mask="url(#flagMask)"/>

2.2.3 using groups (<g> or complex uses ( <use>).The content of a <clipPath> cannot contain either groups ( <g>) or complex uses ( <use>). A clip path can only contain simple drawings and reuses of simple drawn objects. If we need to reuse content, we need to use a <mask>, as follows:

<svg width="150px" height="150px"   >

<mask id="reuseMask">

<g id="reuseMaskGroup">
<circle cx="10%" cy="10%" r="10%"  fill="white"/>
<circle cx="30%" cy="10%" r="10%"  fill="white"/>
<circle cx="50%" cy="10%" r="10%"  fill="white"/>
<circle cx="70%" cy="10%" r="10%"  fill="white"/>
<circle cx="90%" cy="10%" r="10%"  fill="white"/>
</g>

<use xlink:href="#reuseMaskGroup" 
transform="translate(0,30)" />
<use xlink:href="#reuseMaskGroup" 
transform="translate(0,60)" />
<use xlink:href="#reuseMaskGroup" 
transform="translate(0,90)" />
<use xlink:href="#reuseMaskGroup" 
transform="translate(0,120)" />
</mask>
<g mask="url(#reuseMask)">
<image  y="0" x="0" width="100%" height="100%" 
xlink:href='../wp-content/uploads/preludio/tutorials/html5/svg/coworker1.jpg' />
</g>
</svg>

Next tutorial

Leave a comment