Clipping shapes with clipPath and mask in SVG
Two techniques, different uses
SVG offers two ways to "clip": clipPath (hard cut by a shape) and mask (clipping by grayscale/transparency levels). They're used to fit images or create effects.
clipPath: cut by a shape
<defs> <clipPath id="circle"><circle cx="50" cy="50" r="50"/></clipPath> </defs> <image href="photo.jpg" width="100" height="100" clip-path="url(#circle)"/>
Only what falls inside the circle is visible. Sharp edges (all or nothing).
mask: clip by luminosity
<defs> <mask id="m"> <rect width="100" height="100" fill="white"/> <circle cx="50" cy="50" r="30" fill="black"/> </mask> </defs> <rect width="100" height="100" fill="#6c8cff" mask="url(#m)"/>
In a mask, white = visible, black = hidden, grays = semi-transparent. It allows transparency gradients.
Which to use?
- clipPath: cuts with a defined edge (fit a photo into a shape).
- mask: fades, soft transparencies, effects.
Tip
To fit a photo into a circle or shape, clipPath is the simplest. For something to fade out, use mask with a gradient.
Design the clip shape
Create the clip figure in svgdesk, copy its code and use it inside <clipPath> or <mask>.