Chapter 27: SVG Clipping and Masking
SVG Clipping and Masking
These two features — clipping and masking — are among the most powerful tools in SVG for controlling what parts of a shape, image, text, or group are visible and what parts are hidden.
They let you cut out shapes like cookie cutters, create irregular borders, make circular profile pictures, reveal only part of a photo, create text masks with images inside, fade edges, and do hundreds of creative effects that look like advanced Photoshop — but all in pure vector code.
1. Quick Big-Picture Difference (Very Important!)
| Feature | What it does | Uses color / transparency? | Most common shape used for clip/mask | Typical use cases |
|---|---|---|---|---|
| Clipping (<clipPath>) | Hard cut — shows only inside the clipping path, completely hides everything outside | No — only shape matters (black = visible, white = invisible) | <path>, <circle>, <rect>, <polygon> | Circular avatars, irregular crop, custom borders |
| Masking (<mask>) | Soft / gradient fade — can partially hide areas using grayscale values | Yes — black = fully hidden, white = fully visible, gray = semi-transparent | <rect>, <circle>, gradients, images | Vignette fade, gradient reveal, image inside text, soft edges |
Rule of thumb students always remember:
- Want a sharp, clean cut (like scissors)? → ClipPath
- Want a soft fade, transparency, or gradient reveal? → Mask
2. SVG Clipping (<clipPath>) – Hard Cut / Cookie-Cutter Style
How it works:
- You define a <clipPath> with any shape(s) inside
- Then apply clip-path=”url(#myClip)” to the element you want to cut
- Everything outside the clip shape is 100% hidden — no partial transparency
Example 1 – Circular Profile Picture (Most Common Use)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Clipping – Circular Avatar</title> </head> <body> <h1>Clipping: Circular Photo Crop</h1> <svg width="300" height="300" viewBox="0 0 300 300"> <defs> <!-- Define the clipping shape: a circle --> <clipPath id="circleClip"> <circle cx="150" cy="150" r="140"/> </clipPath> </defs> <!-- Photo gets clipped to the circle --> <image href="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300" x="0" y="0" width="300" height="300" clip-path="url(#circleClip)" /> <!-- Optional: visible circle border --> <circle cx="150" cy="150" r="140" fill="none" stroke="white" stroke-width="8"/> </svg> </body> </html> |
Result: Square photo becomes perfect circle avatar with sharp edges.
Example 2 – Clip Text with a Shape
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<defs> <clipPath id="starClip"> <polygon points="150,20 200,100 280,100 220,150 250,230 150,180 50,230 80,150 20,100 100,100"/> </clipPath> </defs> <image href="https://picsum.photos/300/300" width="300" height="300" clip-path="url(#starClip)"/> |
→ Photo visible only inside star shape — very creative!
3. SVG Masking (<mask>) – Soft / Gradient / Transparency Style
How it works:
- You define a <mask> element
- Inside the mask: white = fully visible, black = fully hidden, gray = semi-transparent
- You can use gradients, images, shapes, text — anything that creates grayscale
- Apply with mask=”url(#myMask)”
Example 1 – Simple Vignette Fade (Soft Edges)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<svg width="400" height="400" viewBox="0 0 400 400"> <defs> <mask id="vignetteMask"> <!-- Black rectangle = hidden edges --> <rect width="400" height="400" fill="black"/> <!-- White circle in center = visible area --> <circle cx="200" cy="200" r="180" fill="white"/> </mask> </defs> <image href="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" x="0" y="0" width="400" height="400" mask="url(#vignetteMask)" /> </svg> |
→ Photo fades softly to black at edges (vignette effect)
Example 2 – Text Mask (Image Inside Text – Very Popular)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<svg width="600" height="200" viewBox="0 0 600 200"> <defs> <mask id="textMask"> <!-- White text = visible area, black background = hidden --> <rect width="600" height="200" fill="black"/> <text x="300" y="140" font-size="140" text-anchor="middle" fill="white" font-family="Arial Black"> SVG </text> </mask> </defs> <image href="https://images.unsplash.com/photo-1557683316-973673baf926?w=800" x="0" y="0" width="600" height="200" mask="url(#textMask)" /> </svg> |
→ Beautiful gradient photo visible only inside the letters “SVG”
Example 3 – Gradient Mask (Soft Reveal)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<defs> <linearGradient id="fadeGrad"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="black"/> </linearGradient> <mask id="fadeMask"> <rect width="400" height="300" fill="url(#fadeGrad)"/> </mask> </defs> <image href="photo.jpg" width="400" height="300" mask="url(#fadeMask)"/> |
→ Photo fades from full visible → fully hidden left to right
4. Teacher’s Quick Comparison Table (Exam Style)
| Feature | <clipPath> (Clipping) | <mask> (Masking) |
|---|---|---|
| Edge style | Sharp / hard cut | Can be soft / gradient / partial transparency |
| Uses color | No — only shape matters | Yes — black=hide, white=show, gray=partial |
| Can use gradients/images | No | Yes — very powerful |
| Performance | Faster (simple cut) | Slightly slower (grayscale calculation) |
| Most used for | Circular crops, irregular shapes | Vignettes, text reveals, soft fades |
5. Teacher’s Final Tips 😄
- Always put <clipPath> and <mask> inside <defs>
- clip-path / mask accept url(#id) — the # is mandatory
- For responsive: Use percentages or viewBox carefully
- Common mistake: Apply clip-path to group but shapes go outside → clipping fails
- Pro trick: Combine clip + mask → clip for hard edge + mask for soft fade
- Animation: Animate clipPath shape or mask gradient → reveal animations
Understood SVG Clipping and Masking now? These two features unlock 80% of the “wow” effects you see in modern SVG illustrations, avatars, loaders, and UI components.
Tell me what you want next:
- Animated reveal using mask?
- Circular + gradient mask combo (glass avatar)?
- Clip-path polygon with hover scale?
- Text with image mask + glow?
- Or full profile card with clipping + masking + shadow?
Just say — we can build any clipping/masking effect together right now! 🚀
