A team page often needs every profile photo to appear inside a perfect circle, or sometimes a hexagon to match the brand style. Cropping the photo in an image editor works, but the operation has to be repeated every time the photo changes, and the shape stays baked into the file.
The <clipPath> element solves this directly inside the SVG: it defines a silhouette that cuts out any other element referencing it, without ever touching the original pixels or points. Swap the photo, the cut shape stays exactly the same.
Definition
A <clipPath> groups one or more shapes (a <path>, a <rect>, an ellipse) that together define a clipping region. This content is never rendered on its own, it only acts as a template. To take effect, another element in the document must reference it through the presentation property clip-path, written as clip-path="url(#myId)". Anything outside the silhouette becomes invisible, anything inside stays visible as normal.
Main attributes
The most important detail is not carried by <clipPath> itself but by the shapes it contains, since their outline is what draws the cut. Two settings are still worth knowing.
- id: required, this is what the
clip-pathattribute of the clipped element references. - clipPathUnits: defaults to
userSpaceOnUse(the clip coordinates follow the document's coordinate system) orobjectBoundingBox(coordinates run from 0 to 1, relative to the clipped element's bounding box, handy for a shape reused across varying sizes).
A concrete example
A hexagonal photo badge, built with a <polygon> as the clipping template:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="hexagon">
<polygon points="100,10 180,55 180,145 100,190 20,145 20,55" />
</clipPath>
</defs>
<image href="team-photo.jpg" x="0" y="0" width="200" height="200" clip-path="url(#hexagon)" />
</svg>The photo file itself stays a plain rectangle. The hexagon shape only takes effect at render time, and it applies to any other image as long as the hexagon identifier is referenced.
Difference from the CSS clip-path property
The two share a name, which causes real confusion. The CSS property clip-path can either point to an SVG <clipPath> with a url, or use a self-contained shape function such as circle(), polygon() or inset(), computed entirely in CSS without any SVG markup at all. <clipPath> itself only exists inside SVG, holds real vector shapes as children, and is meant to be defined once and referenced from several elements through the same id.
| Aspect | <clipPath> (SVG) | clip-path shape function (CSS) |
|---|---|---|
| Where it lives | Inside the SVG, typically in defs | In a stylesheet or the style attribute |
| Possible shapes | Real SVG outlines (path, rect, polygon...) | Predefined functions (circle(), polygon(), inset()...) |
| Reuse | One id referenced by several elements | Has to be repeated on every rule |
A classic trap
<clipPath> with a capital P, never <clippath> in all lowercase. A casing mistake triggers no visible error in the console: the browser silently ignores the unknown element, and the image or shape that was supposed to be clipped simply renders without any clipping at all.Real-world use case
On a learning platform, <clipPath> typically displays user avatars inside a perfect circle regardless of the uploaded photo's original shape, crops a screenshot so it fits exactly inside the outline of a phone mockup drawn in SVG, or gives a medal or shield shape to a reward badge image.
FAQ
<clipPath> be animated?Yes. Since the content of a <clipPath> is made of ordinary SVG shapes, their attributes, a polygon's points, an ellipse's radius, a rectangle's position, can be animated or changed with JavaScript, which moves the visible area in real time.
<clipPath> be shown directly on the page?No, never. The browser does not render the clipPath's own content on screen: only the element that references it through clip-path becomes visible, cut to its silhouette. Placing it outside a defs block does not change this, only the id reference matters.
<clipPath> need to be repeated for every element to cut?No, that is exactly its point: a single <clipPath> defined once in the document can be referenced by as many elements as needed through the same identifier, guaranteeing a strictly identical shape everywhere it is used.