Tech and Media Labs
This site uses cookies to improve the user experience.




SVG Clip Path

Jakob Jenkov
Last update: 2014-06-15

SVG clip paths, or SVG clipping as it is also called, are used to clip an SVG shape according to a certain path. The parts of the shape inside the path are visible, and the parts outside are invisible.

Clip Path Example

Here is a simple clip path example:

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

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

This example defines a clip path that is shaped like a rectangle (the shape inside the <clipPath> element). The circle defined at the end of the example references the <clipPath> id attribute via the clip-path CSS property.

Below, on the left, is the resulting image. On the right is the same image but with the clip path drawn too.

Notice how only the parts of the circle inside the clip path are visible. The rest is clipped.

Advanced Clip Paths

You can use other shapes than a rectangle as clip path. You can use a circle, ellipse, polygon or a custom path. Any SVG shape can be used as a clip path.

Here is an example of using a <path> element as a clip path, since these are the most advanced types of clip paths you can use. The clip path is applied to a <rect> element.

<defs>
    <clipPath id="clipPath3">
        <path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
    </clipPath>
</defs>

<rect x="5" y="5" width="190" height="90"

      style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>
    

Here is the resulting image - on the right. On the left the image without clip path is shown.

Clip Paths on Groups

It is possible to use clip paths on a group of SVG shapes instead of on each shape individually. Just put the shapes inside a <g> element and set the clip-path CSS property on the <g> element. Here is an example:

<defs>
    <clipPath id="clipPath4">
        <rect x="10" y="20" width="100" height="20" />

    </clipPath>
</defs>

<g style="clip-path: url(#clipPath4);">
    <rect x="5" y="5" width="190" height="90"
          style="stroke: none; fill:#00ff00;"/>

    <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
</g>    

Below is first the image without clip path, and then with clip path applied:

Text as Clip Paths

It is also possible to use a text as a clip path. Here is an example:

<defs>
    <clipPath id="clipPath5">
        <text x="10" y="20" style="font-size: 20px; ">This is a text</text>
    </clipPath>
</defs>

<g style="clip-path: url(#clipPath5);">
    <rect x="5" y="5" width="190" height="90"

          style="stroke: none; fill:#00ff00;"/>
    <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
</g>

Here is the resulting image, with and without clip path applied:

This is a text

As you can see, only the parts of the shapes inside the text are now visible.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC