SVG Tutorial

SVG element

SVG <filter> Filter SVG Reference Manual

SVG <clippath> Clipping Path

SVG clipping path (also known as SVG clip) is used to clip SVG shapes according to a specific path. The part of the shape inside the path is visible, and the part outside is not visible.

Clipping Path Example

This is a simple example of a clipping path:

Example

<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<defs
　　　　　　　　<clippath id="clipPath">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath); "></circle>
</svg>
<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<defs
　　　　　　　　<clippath id="clipPath2">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath2); "></circle>
　　　　<rect x="15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"></rect>
</svg>

Test to see‹/›

This example defines a clipping path shape similar to a rectangle (the shape within the <clipPath> element). The circle defined at the end of the example is clipped through the CSS property clip-path refers to the <clipPath> id attribute.

The generated image is at the lower left. On the right is the same image, but also the clipping path is drawn.

Please note that only the circular part is visible within the clipping path. The rest will be clipped.

Advanced Clipping Paths

You can use shapes other than rectangles as clipping paths. You can use circles, ellipses, polygons, or custom paths. Any SVG shape can be used as a clipping path.

This is an example of using the <path> element as a clipping path, as these are the highest-level clipping path types you can use. The clipping path will be applied to the <rect> element.

Example

<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect>
</svg>
<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<defs
　　　　　　　　<clippath id="clipPath3">
　　　　　　　　　　　　<path d="M10,10　q60,60　100,0 q50,50　50,50 l40,0 l-40,40 l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"></rect>
</svg>

Test to see‹/›

This is the generated image-on the right. The left side shows the image without a clipping path.

Clipping Path on Group

You can use a clipping path on a group of SVG shapes instead of applying it to each shape individually. Simply place the shapes within a <g> element, and then set the CSS property clip-path. Here is an example:

Example

<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect>
　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</svg>
<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<defs
　　　　　　　　<clippath id="clipPath4">
　　　　　　　　　　　　<rect x="10" y="20" width="100" height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g style="clip-path: url(#clipPath4);">
　　　　　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
　　　　</g>
</svg>

Test to see‹/›

Below is the image without a clipping path, followed by the image with the clipping path applied:

Text as Clipping Path

Text can also be used as a clipping path. Here is an example:

Example

<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect>
　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</svg>
<svg width="200" height="100" style="border:　1px solid #cccccc;">
　　　　<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;"></rect>
　　　　　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
　　　　</g>
</svg>

Test to see‹/›

Here are the results of the image with and without the clipping path:

As you can see, only a part of the internal shape of the text is displayed now.

SVG <filter> Filter SVG Reference Manual