Summary -

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

<svg> with <clipPath> is used to clip an SVG object created on the path which it chooses. The image within the path is detectable while the clipped part is not detectable.

Example -

Below example describes about how to clip the path on SVG object.
<!DOCTYPE html>
<html>
	<head>
		<title>SVG Cliping Path</title>
	</head>
  	<body>
    	<svg class="svg-graphic" width="300" height="200">
      		<g>
        		<clipPath id="clipimg">
          			<polygon points="140 10, 240 140, 40 190, 10 90" />
        		</clipPath>
      		</g>
      		<image clip-path="url(#clipimg)" height="400" width="400"
				xlink:href="bird-one.png">
    	</svg>
  	</body>
</html>

Output -