When to Use SVG Filters

First, SVG Filters can be used within image and design tools to make SVG elements more interesting. They can provide a sense of depth or create appearances that are otherwise not possible with SVG. It can also be used to achieve a variety of scenarios outside of illustrating tools.
A commonly desired effect on the Web is the CSS3 text-shadow effect. Although text-shadow doesn’t apply to SVG text, the effect can be replicated using SVG Filters.

<filter id="myShadowFilter">

<feOffset dx="5" dy="5"/>

<feGaussianBlur stdDeviation="3"/>

<feColorMatrix type="matrix" values="0 0 0 0 .2, 0 0 0 0 1, 0 0 0 0 .75, 0 0 0 1 0" result="shadow"/>

<feMerge>

<feMergeNode in="shadow"/>

<feMergeNode in="SourceGraphic"/>

feMerge>

filter>

This filter creates a drop shadow effect by taking the pig graphic, offsetting it by 5 units in the x and y directions, applying a Gaussian blur, changing the color of the shadow to a bluish green, then compositing the original pig image with the shadow. It’s easy to create a shadow effect for text or images within SVG.

An image of an SVG pig with a shadow effect applied

In addition to adding dimension to SVG’s flatness, the filter effects can easily be applied to raster images by bringing them into an

An image of an SVG pig with an Inkscape-generated SVG filter applied

If your browser supports SVG Filters, you can click here to see the light changing on the pig above with a single attribute change:

light1.setAttribute("elevation", currentValue);

The filter attribute is a presentation attribute, which means it can be applied to elements through CSS and has all the benefits of styling through CSS, including being able to apply effects using the hover pseudoselector.