SVG Filters

SVG Filters

SVG filters are used to add special effects to SVG graphics.

Browser Support for SVG Filters

The numbers in the table specify the first browser version that supports SVG filters.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.0 6.0 9.6

SVG Filter Elements

In the following chapters, we will demonstrate some possible filter effects - and let you know what SVG can do.

The available filter elements in SVG are:

  • <feBlend> - Filter for Image Combination
  • <feColorMatrix> - Color Transformation Filter
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> - Filter Shadow
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> - Verlichtingsfilter
  • <fePointLight> - Verlichtingsfilter
  • <feSpotLight> - Verlichtingsfilter

Tip: U kunt meerdere filters gebruiken op elk SVG-element!