Define reusable clipping shapes
Place shapes inside clipPath and reference them from clipped elements.
clip path svg
Use SVG clipPath to crop vector artwork
SVG clip paths limit where artwork is visible. They are useful for masks, badges, avatars, and complex icon effects.
Watch coordinate systems
clipPath units and viewBox choices affect where clipping appears.
Preview browser behavior
Clipping mistakes are visual, so render examples while editing.
clipPath example
<svg viewBox="0 0 120 80"><defs><clipPath id="pill"><rect width="120" height="80" rx="28"/></clipPath></defs><g clip-path="url(#pill)"><rect width="120" height="80" fill="#0e7c66"/><circle cx="85" cy="28" r="40" fill="#f59e0b"/></g></svg>
<clipPath id="pill"><rect width="120" height="80" rx="28"/></clipPath>SVG Clip Path Guide FAQ
What does clipPath do in SVG?
It restricts drawing so only the clipped area remains visible.
Why is my clipPath not working?
Check the id reference, coordinate system, and whether the target element uses the clip-path URL.