Last updated
SVG Filters Overview
SVG filters apply graphical effects to SVG elements and images using a pipeline of filter primitives. Each primitive takes one or more inputs, processes them, and produces an output that can be fed into the next primitive. Common effects include blur, drop shadow, color manipulation, displacement, and compositing.
Common Filter Primitives
| Primitive | Effect |
|---|---|
feGaussianBlur | Gaussian blur |
feDropShadow | Drop shadow (shorthand) |
feColorMatrix | Color transformation matrix |
feComposite | Combine two images |
feBlend | Blend two images (like CSS blend modes) |
feTurbulence | Noise/turbulence texture |
feDisplacementMap | Distort image using another image |
feMorphology | Erode or dilate shapes |
feConvolveMatrix | Convolution (sharpen, emboss) |
Drop Shadow Filter
SVG
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="4" dy="4" stdDeviation="3"
flood-color="rgba(0,0,0,0.4)"/>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>
</defs>
<rect x="20" y="20" width="80" height="80"
fill="#3498DB" filter="url(#shadow)"/>
<circle cx="150" cy="60" r="40"
fill="#E74C3C" filter="url(#blur)"/>
</svg>