SVG Filters and Effects: Blur, Color, Noise, and Performance

SVG filters apply image-processing operations to a rendered element. They can create a soft shadow, adjust colors, or add texture without turning the source into a bitmap. Filters are powerful, but they also make rendering harder to reason about, so use them with a clear fallback and test at the final display size.

A simple shadow with `feDropShadow`

<svg viewBox="0 0 220 120" role="img" aria-labelledby="title">
  <title id="title">A card with a soft shadow</title>
  <defs>
    <filter id="card-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#0f172a" flood-opacity="0.22" />
    </filter>
  </defs>
  <rect x="25" y="20" width="170" height="80" rx="12" fill="#ffffff" filter="url(#card-shadow)" />
</svg>

The filter region is larger than the rectangle so the shadow is not clipped. Keep the region as tight as the effect allows; an unnecessarily large region can increase the intermediate surface that the browser has to process.

Build a glow with blur and merge

feGaussianBlur softens an input. feMerge combines several results:

<filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
  <feMerge>
    <feMergeNode in="blur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

Use a restrained blur and test thin strokes. A large blur on a large canvas can be much more expensive than the source path suggests.

Adjust color with `feColorMatrix`

Color matrices are useful for grayscale, opacity, or a deliberate tint. Keep the matrix close to the element that needs it and document why it exists. A CSS filter may be easier to maintain when the effect is a simple brightness or contrast change.

Add texture with `feTurbulence`

feTurbulence generates procedural noise. Combine it with feColorMatrix or feComposite for a paper or grain effect, but avoid using animated noise as a default background. It can consume more work than a small raster texture, and a static texture is often easier to cache.

Validate the rendering boundary

When a filter looks wrong, check:

The filter region and filterUnits.
The coordinate system used by x, y, width, and height.
Whether a parent transform changes the apparent scale.
The color space and alpha behavior of the inputs.
Browser differences for the primitives you use.

Use a plain-color fallback or a class that disables the filter when the effect is decorative. Respect prefers-reduced-motion if the filter is animated, and do not use a glow or blur as the only way to communicate state.

Source hygiene and safety

Keep filter IDs unique within the document and remove definitions that are not referenced. Do not accept filter markup from an untrusted source without sanitizing it. SVGDO sanitizes markup in its preview, but exported files still need a source review before they are inserted into a production page.

The best effect is the one that supports the content, remains legible on the intended backgrounds, and has a measurable cost. Compare the filtered and unfiltered versions on real devices before shipping.

A simple shadow with feDropShadow