Simple SVG Filter Examples

1. Basic Blur - feGaussianBlur

The simplest filter: blurs the element.

2. Drop Shadow - feDropShadow

Creates a shadow behind the element.

3. Glow Effect - feGaussianBlur + feMerge

Combines a blurred copy with the original for a glow.

4. Emboss Effect - feConvolveMatrix

Uses a convolution matrix to create a 3D embossed look.

5. Color Swap - feColorMatrix

Transforms colors using a mathematical matrix.

How It Works:

1. Define filters in SVG: Put filter definitions inside <svg><defs>

2. Apply with CSS: Use filter: url(#filterName) to apply to any HTML element

3. Chain effects: Multiple filter primitives in one filter create complex effects

4. Hardware accelerated: These run on the GPU for smooth performance!