A guide to SVG's built-in filter system — blur, drop shadow, color matrix, and displacement effects.

SVG includes a powerful filter system that can apply blur, shadow, color manipulation, and other effects entirely in vector — no raster images needed.

Common SVG Filters

  • feGaussianBlur — blurs an element (used for glow and shadow effects)
  • feDropShadow — adds a drop shadow
  • feColorMatrix — transforms colors (grayscale, sepia, hue rotation)
  • feDisplacementMap — distorts shapes using another image
  • feTurbulence + feDisplacementMap — creates organic, turbulent effects

How to Apply Filters

Define a filter in <defs> with a unique ID, then apply it to any element with filter="url(#filterId)". Filters can be chained — the output of one filter primitive feeds into the next.

Performance Note

Complex SVG filters (especially blur on large elements) can be CPU-intensive. Use them judiciously, especially on mobile. For static effects, consider baking the filter result into the SVG paths instead.

Start with clean vector paths — convert your PNGs to SVG first, then add filters for visual polish.