Chapter 19: SVG Filters Introduction
SVG Filters are one of the most powerful and beautiful features in SVG. They let you apply photoshop-like effects (blur, shadow, brightness, contrast, color changes, turbulence, waves, glow, emboss, etc.) directly inside SVG code — and the best part is:
- They work on any SVG element (shapes, paths, text, images, groups)
- They are vector-based → zoom 1000% and effects still look perfect (no pixelation)
- They are live — change color or shape → filter updates instantly
- They can be animated with CSS or SMIL
- They are reusable — define once in <defs>, apply to many elements
In short: SVG Filters = your free mini-Photoshop inside the browser.
1. Where Do Filters Live? (Basic Structure)
All filters are defined inside <defs> (definitions area — hidden but reusable).
Basic skeleton:
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg ...> <defs> <filter id="myBlur"> <!-- One or more filter primitives go here --> </filter> </defs> <!-- Apply the filter to any shape --> <circle cx="150" cy="100" r="80" fill="orange" filter="url(#myBlur)"/> </svg> |
- id=”myBlur” → unique name
- filter=”url(#myBlur)” → apply it (the # is very important!)
2. The Most Important Filter Primitive – <feGaussianBlur>
This is the first filter 99% of people learn — it creates a nice soft blur.
Example – Simple blur on a rectangle:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="400" height="200" viewBox="0 0 400 200"> <defs> <filter id="blur1"> <feGaussianBlur stdDeviation="8" /> <!-- 8 = blur amount --> </filter> </defs> <rect x="50" y="50" width="300" height="100" fill="dodgerblue" filter="url(#blur1)"/> <text x="200" y="110" font-size="40" text-anchor="middle" fill="white">Blurred Box</text> </svg> |
- stdDeviation=”8″ → higher number = more blur (try 3, 10, 20)
- You can do different x/y blur: stdDeviation=”12 4″ (horizontal 12, vertical 4)
3. The Most Popular Filters Beginners Love (With Examples)
1. Drop Shadow (Most Used – Like CSS box-shadow)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<filter id="shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/> <feOffset in="blur" dx="6" dy="6" result="offsetBlur"/> <feFlood flood-color="black" flood-opacity="0.5" result="color"/> <feComposite in="color" in2="offsetBlur" operator="in" result="shadow"/> <feMerge> <feMergeNode in="shadow"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> |
Short modern version (2025–2026 browsers support well):
XML
|
0 1 2 3 4 5 6 7 8 |
<filter id="shadow"> <feDropShadow dx="6" dy="6" stdDeviation="5" flood-color="black" flood-opacity="0.5"/> </filter> |
→ Apply: filter=”url(#shadow)” on any shape/text
2. Glow / Outer Glow
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<filter id="glow"> <feGaussianBlur stdDeviation="6" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> |
→ Makes neon / glowing text or icons (increase blur for bigger glow)
3. Brightness / Contrast (Like photo editor)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<filter id="bright"> <feComponentTransfer> <feFuncR type="linear" slope="1.5" /> <!-- 1.5 = 150% brightness --> <feFuncG type="linear" slope="1.5" /> <feFuncB type="linear" slope="1.5" /> </feComponentTransfer> </filter> |
4. Grayscale (Black & White)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<filter id="gray"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> |
5. Duotone / Color Tint (Very Trendy)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<filter id="duotone"> <feColorMatrix type="matrix" values="0.8 0 0 0 0 0 0.4 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/> <feComponentTransfer> <feFuncR type="table" tableValues="0 1"/> <feFuncG type="table" tableValues="0 0.5"/> <feFuncB type="table" tableValues="0.2 0"/> </feComponentTransfer> </filter> |
6. Teacher’s Quick Reference Table (Keep This Handy)
| Effect You Want | Main Primitive(s) | Key Attribute(s) | Beginner Difficulty |
|---|---|---|---|
| Soft blur | feGaussianBlur | stdDeviation | ★☆☆☆☆ |
| Drop shadow | feDropShadow or feGaussianBlur + feOffset + feMerge | dx, dy, stdDeviation, flood-color | ★★☆☆☆ |
| Glow / neon | feGaussianBlur + feMerge | stdDeviation (repeat for stronger) | ★★☆☆☆ |
| Grayscale | feColorMatrix | matrix values | ★★☆☆☆ |
| Brightness / Contrast | feComponentTransfer | slope (brightness), intercept | ★★☆☆☆ |
| Sepia / Vintage | feColorMatrix + feComponentTransfer | tableValues | ★★★☆☆ |
| Turbulence / waves | feTurbulence + feDisplacementMap | baseFrequency, scale | ★★★★☆ |
7. Quick Tips from Your Teacher 😄
- Always put <filter> inside <defs>
- Use filter=”url(#myFilter)” — the # is mandatory
- Apply to <g> (group) to filter many elements at once
- Filters can stack: filter=”url(#blur) url(#shadow)”
- Performance: Too many heavy filters on large areas = slow on mobile — test!
- Common mistake: Forget to set result and connect primitives → effect disappears
- Practice sites: CodePen has thousands of SVG filter demos — search “SVG filter glow” or “SVG duotone”
Understood the introduction to SVG Filters? This is just the door — inside are glows, distortions, textures, 3D effects, and crazy animations.
Tell me — want to go deeper right now?
- Full drop-shadow step-by-step
- Glowing neon text tutorial
- Animated blur
- Filter on imported <image> photo
- Or turbulence/water ripple effect?
Just say the word — we can build any filter together! 🚀
