Summary -

In this topic, we described about the SVG Mask with detailed example.

<svg> with <mask> element is similar to the clip path that produces a mask on the SVG object. This continuously holds an id attribute.

Example -

Below example describes about how to clip path that produces a mask on the SVG object.
<!DOCTYPE html>
<html>
	<head>
		<title>SVG Mask</title>
	</head>
  	<body>
    	<svg>
	  		<defs>
        		<mask id="mySVG">
          			<rect x="10" y="10" width="300" height="300" 
						fill="pink" />
          			<polygon points="250,230 200,300 200,300" 
						fill="orange" />
        		</mask>
	  		</defs>
      		<polygon points="18 20, 120 38, 40 120" fill="green" />
      		<circle cx="60" cy="60" r="30" mask="url(#mySVG)" />
    	</svg>
  	</body>
</html>

Output -