SVG Filters

SVG Filters

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

Browser Support

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

SVG Filter Elements

In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG.

The available filter elements in SVG are:

• <feBlend> - filter for combining images
• <feColorMatrix> - filter for color transforms
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset> - filter for drop shadows
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• <feDistantLight> - filter for lighting
• <fePointLight> - filter for lighting
• <feSpotLight> - filter for lighting

	Tip: You can use multiple filters on each SVG element!