Sams Teach Yourself SVG in 24 Hours

Using Filters

At the most basic level, filters are created by inserting various filter primitives inside a filter element. For example, most filters will start like this example:

<filter id=”FilterID”> 
<!-- Filter primitives go here -->
</filter>

The filter primitives that reside within this element are structured similarly and in some cases house other filter primitives. Filters can be applied to objects using the style declaration filter:url(#FilterID), where FilterID is the value of the filter's id attribute.

Filter primitives, despite their different functions, have a common vocabulary in many of their attributes. The x, y, width, and height attributes are means of specifically specifying an area wherein the filter effect should be applied. ...