SVG Filter Effects: Creating Advanced Visual Effects
Master SVG filters for blur, shadows, color effects, and complex visual treatments. Complete guide to filter primitives and creative combinations.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Try it on your own file
Free preview, no signup. Drop an image and see the vector before deciding anything.
Key Takeaways
- SVG filters apply GPU-accelerated visual effects like blur, shadow, and distortion directly in the browser
- Filter primitives (feGaussianBlur, feColorMatrix, feTurbulence, etc.) can be chained to create complex effects
- Creative recipes like frosted glass, neon glow, and emboss are built by combining simple filter primitives
- Performance varies widely -- feColorMatrix is lightweight while feTurbulence is computationally heavy
- Use CSS filter fallbacks for simple effects and reserve SVG filters for advanced compositions
The Power of SVG Filters
SVG filters enable sophisticated visual effects without raster images. From simple shadows to complex distortions, filters transform vector graphics in powerful ways.
Filter Basics
Filter Structure
<defs>
<filter id="myFilter">
<!-- Filter primitives here -->
</filter>
</defs>
<rect filter="url(#myFilter)" .../>Filter Region
Control filter bounds:
<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
<!-- Extends filter area beyond element -->
</filter>Pro Tip: Always extend the filter region (e.g., x="-20%") when using blur or shadow effects. If your filter output looks clipped, the filter region is too small.
Common Filter Effects
Blur (feGaussianBlur)
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>Variable blur:
<!-- Horizontal blur only -->
<feGaussianBlur stdDeviation="10 0"/>
<!-- Vertical blur only -->
<feGaussianBlur stdDeviation="0 10"/>Drop Shadow (feDropShadow)
Simple shadow:
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>Custom Shadow
More control:
<filter id="custom-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offset"/>
<feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
<feComposite in="color" in2="offset" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealColor Effects
Color Matrix (feColorMatrix)
Grayscale conversion:
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>Sepia tone:
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>Hue rotation:
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>Color Adjustment
Brightness/contrast:
<filter id="bright">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept="0"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="1.5" intercept="0"/>
</feComponentTransfer>
</filter>Displacement and Distortion
Turbulence
Creating noise:
<filter id="turbulence">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"/>
</filter>Displacement Map
Distort with pattern:
<filter id="displace">
<feTurbulence type="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"/>
<feDisplacementMap in="SourceGraphic"
in2="noise"
scale="30"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>Lighting Effects
Diffuse Lighting
3D-like lighting:
<filter id="diffuse">
<feDiffuseLighting lighting-color="#white" surfaceScale="5">
<fePointLight x="100" y="100" z="200"/>
</feDiffuseLighting>
</filter>Specular Lighting
Shiny highlights:
<filter id="specular">
<feSpecularLighting specularConstant="1"
specularExponent="30"
lighting-color="white"
surfaceScale="5">
<fePointLight x="150" y="60" z="200"/>
</feSpecularLighting>
</filter>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeCombining Filters
Merge Operations
Layering results:
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Composite Operations
Combining with operators:
<filter id="cutout">
<feImage href="mask.svg" result="mask"/>
<feComposite in="SourceGraphic"
in2="mask"
operator="in"/>
</filter>Creative Recipes
Frosted Glass
<filter id="frosted">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
<feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
<feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>Neon Glow
<filter id="neon">
<feFlood flood-color="#ff00ff" result="flood"/>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
<feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Emboss Effect
<filter id="emboss">
<feConvolveMatrix
order="3"
kernelMatrix="-2 -1 0
-1 1 1
0 1 2"/>
</filter>Animation with Filters
Animated Blur
<filter id="animated-blur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation"
values="0;10;0"
dur="2s"
repeatCount="indefinite"/>
</feGaussianBlur>
</filter>Dynamic Turbulence
<feTurbulence baseFrequency="0.02">
<animate attributeName="baseFrequency"
values="0.01;0.05;0.01"
dur="5s"
repeatCount="indefinite"/>
</feTurbulence>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealPerformance Considerations
Performance Impact
Filter Performance:
feGaussianBlur: Heavy (radius dependent)
feColorMatrix: Light
feTurbulence: Very heavy
feDisplacementMap: Heavy
Chained filters: CumulativeOptimization Tips
- Minimize filter region
- Reduce blur radius
- Limit chained effects
- Cache static filters
- Use CSS filters when possible
For simple effects like blur, grayscale, or drop-shadow, CSS filter is significantly faster than SVG filters because it leverages hardware-accelerated compositing. Reserve SVG filters for effects CSS can't replicate.
CSS Filter Alternative
When possible, use CSS:
.blurred {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}Browser Compatibility
Support Status
Wide Support:
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge
Variable Support:
- feDisplacementMap
- feTurbulence
- feDiffuseLightingFallback Strategies
.element {
/* Fallback */
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@supports (filter: url(#shadow)) {
.element {
box-shadow: none;
filter: url(#shadow);
}
}Conclusion
SVG filters enable sophisticated effects impossible with CSS alone. While computationally intensive, they offer precise control over visual treatments. Use them judiciously for impactful effects, always considering performance and providing fallbacks.
Create Filtered Vector Effects
| Filter Primitive | Effect | Performance Cost |
|---|---|---|
| feGaussianBlur | Soft blur / frosted glass | Medium (GPU-accelerated) |
| feColorMatrix | Color shifting, desaturation | Low |
| feTurbulence | Noise, organic textures | High (pixel-level computation) |
| feDisplacementMap | Distortion, ripple effects | High |
| feDropShadow | Drop shadows | Low–Medium |