1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• Clip Path Example
• Advanced Clip Paths
• Clip Paths on Groups
• Text as Clip Paths

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:

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