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 -->

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. ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.