SVG Filters Deep Dive: Blur, Noise & More

Q: The SVG Filter Pipeline

SVG filters work like a signal processing pipeline. Each <fe*> (filter effect) primitive takes one or more inputs, applies a transformation, and outputs a result that the next primitive can use. The final primitive's output is rendered to screen. Inputs can be named (via the result attribute) or implicitly chained.

Q: feGaussianBlur: Softening

<feGaussianBlur> applies a Gaussian blur. The stdDeviation attribute controls the radius — values above 20 are very slow on large elements. Use small values (0.5–3) for anti-aliasing effects, medium values (5–15) for glow effects, and large values only for offline pre-rendering. The edgeMode="wrap" attribute ensures the blur doesn't create transparent edges on tiling patterns.

The SVG Filter Pipeline

SVG filters work like a signal processing pipeline. Each <fe*> (filter effect) primitive takes one or more inputs, applies a transformation, and outputs a result that the next primitive can use. The final primitive's output is rendered to screen. Inputs can be named (via the result attribute) or implicitly chained.

feGaussianBlur: Softening

<feGaussianBlur> applies a Gaussian blur. The stdDeviation attribute controls the radius — values above 20 are very slow on large elements. Use small values (0.5–3) for anti-aliasing effects, medium values (5–15) for glow effects, and large values only for offline pre-rendering. The edgeMode="wrap" attribute ensures the blur doesn't create transparent edges on tiling patterns.

<filter id="soften">
  <feGaussianBlur stdDeviation="2" edgeMode="wrap"/>
</filter>
<rect filter="url(#soften)" width="100%" height="100%"
      fill="url(#myPattern)"/>

feTurbulence: Noise & Organic Texture

<feTurbulence> generates Perlin noise or turbulence noise mathematically. Key attributes: type="fractalNoise" for organic textures, type="turbulence" for more chaotic distortion. baseFrequency controls density (0.01 = coarse, 0.9 = fine grain), numOctaves adds detail (2–5 is typical). Combine with feColorMatrix type="saturate" values="0" to convert to greyscale noise.

feColorMatrix: Colour Manipulation

<feColorMatrix> applies a 5×4 matrix transformation to every pixel's RGBA values. The type="saturate" shorthand accepts a single value (0 = greyscale, 1 = no change, >1 = supersaturated). The type="hueRotate" shifts colours around the colour wheel. The full type="matrix" mode accepts 20 values for complete colour control — useful for sepia tones, colour inversion, and custom palettes.

feDisplacementMap: Distortion

<feDisplacementMap> displaces pixel positions using a map image. Chain it after feTurbulence to create a warped, organic distortion effect. The scale attribute controls displacement intensity. A scale of 10–20 creates a subtle wobble; 50+ creates dramatic distortion. This technique makes perfectly straight lines appear hand-drawn.

feBlend & feComposite: Merging Layers

<feBlend> combines two filter layers using Photoshop-style blend modes: normal, multiply, screen, overlay, darken, lighten. <feComposite> merges two images using compositing operations: in (intersection), out, atop, over, xor. These are the tools for building complex multi-layer filter effects.

Performance Considerations

SVG filters are GPU-accelerated in modern browsers but still have a cost. Filters with large blur radii or many chained primitives slow down rendering, especially during animation. Always apply filters to small, contained elements rather than full-page backgrounds. Test performance on low-end mobile devices with Chrome DevTools CPU throttling.

Practical Recipe: Stucco Texture

Combine feTurbulence (baseFrequency 0.35, 5 octaves) → feColorMatrix (saturate 0) → feBlend (screen, over your pattern fill) to create an authentic stucco plaster texture that works at any tile size with no visible seams.