How to Use SVG Clipping Masks
SVG clipPath lets you clip any content to any shape — photos inside circles, text inside a logo, patterns inside letters. Learn to create clipping masks in SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG clipPath in HTML/CSS
Add an SVG clipPath element in your SVG or HTML to clip images or elements to a shape.
- Define a <clipPath id='myClip'> with any shape inside
- Apply with clip-path='url(#myClip)' on the element to clip
- Example: clip a photo to a circle — <clipPath><circle r='100' cx='100' cy='100'/></clipPath>
- Complex clip shapes: any SVG path can be a clip path
- CSS clip-path alternative: clip-path: url(#id) in CSS works on SVG and HTML elements
Clipping Masks in Inkscape
Inkscape's clipping mask applies one path as a clip to another object — useful for cropping images to shapes.
- Draw the clipping shape over the image you want to clip
- Select both the shape and the image
- Object > Clip > Set (or Shift+Alt+Q in newer versions)
- The top object becomes the clip shape; the bottom is clipped to that shape
- To release: Object > Clip > Release
- Clipping masks export correctly in SVG and PDF from Inkscape
Frequently Asked Questions
What's the difference between SVG clip-path and mask?
clip-path clips to a shape outline (hard edges, binary show/hide). mask uses grayscale values for soft edges and opacity — white areas show, black areas hide, gray areas are semi-transparent.
Can I clip a photo to an SVG text shape?
Yes — convert text to a path (Path > Object to Path in Inkscape), then use it as a clip path over a photo. The photo shows only through the letter shapes.
Does SVG clip-path work in all browsers?
Yes — SVG clipPath has full support in all modern browsers. CSS clip-path: url(#id) also has broad support. For the widest compatibility, apply clip-path as an SVG attribute, not CSS.
How do I apply a clipping mask in Adobe Illustrator?
Draw your clip shape on top. Select both the shape and object below. Object > Clipping Mask > Make (Ctrl+7). The top shape clips the objects below it.
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