SVG Clip Path

SVG clip path is used to clip an SVG shape according to a certain path. It is also known as SVG clipping.

The part of the shape which is inside the path is visible and the part which is outside is invisible.

Example

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <defs>
      <clipPath id="clip">
          <rect x="15" y="15" width="40" height="40" />
      </clipPath>
  </defs>

  <circle cx="25" cy="25" r="30"
          style="fill: #0000ff; clip-path: url(#clip); " />
</svg>

</body>
</html>

Test it Now

Explanation

Now you can see that part of the circle inside the clip path are visible rest is clipped.
The id attribute of <clipPath> element defines a unique name for the clip path.

Next TopicSVG Masks

← prev next →