SVG clipPath: Clip and Crop with Vector Shapes
SVG clipPath lets you crop any element to a custom vector shape — clip photos to circles, reveal icons through text, and create complex visual effects.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Basic clipPath Usage
Define a clip shape in <defs>, then reference it on any element.
- <defs><clipPath id='circle-clip'><circle cx='50' cy='50' r='40'/></clipPath></defs>
- <image href='photo.jpg' clip-path='url(#circle-clip)'/>
- Clips the image to the circle shape
- Any SVG element can be a clip shape: rect, circle, path, text
- The clip shape is invisible — only the clip boundary is used
clipPath vs mask
clipPath and mask are related but work differently.
- clipPath: binary — pixels inside are fully visible, pixels outside are fully hidden
- mask: alpha-based — uses grayscale values to control opacity (white=fully visible, black=hidden)
- clipPath: faster to render than mask
- Use clipPath for: hard-edge clipping (circle crop, geometric crop)
- Use mask for: soft fade-out effects, transparency gradients, feathered edges
Creative clipPath Techniques
Advanced patterns using clipPath.
- Text as clip: <clipPath><text>HELLO</text></clipPath> — clips a photo to letterforms
- Animated clip: animate the clip-path path d attribute to reveal content progressively
- Clip multiple elements: apply the same clip-path id to several elements
- clipPathUnits='objectBoundingBox': clip coordinates are relative to each element's bounding box
Frequently Asked Questions
Can I clip an HTML img with SVG clipPath?
Yes — embed the image in SVG using <image href='photo.jpg'> and apply clip-path. Or use CSS: clip-path: url(#myClip) on an HTML img element (requires the SVG clipPath in the page DOM).
How do I crop an image to a circle with SVG?
<defs><clipPath id='c'><circle cx='50' cy='50' r='50'/></clipPath></defs><image href='photo.jpg' width='100' height='100' clip-path='url(#c)'/>
Does clipPath work on SVG text?
Yes — apply clip-path to a <text> element. The text renders only within the clip boundary. Also use text as the clip shape to cut other graphics into letterform shapes.
Why is my SVG clipPath not working in some browsers?
Older browsers need clip-path as an attribute (not CSS property) for SVG elements. Also check that clipPathUnits is set correctly and the clip shape is in the same coordinate system as the clipped element.
Can I animate a SVG clipPath?
Yes — use CSS @keyframes or GSAP to animate the path inside clipPath. This creates reveal animations: the clipped content appears as the clip path grows.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG