The <filter> Element

Filters in SVG are complex, but with a little effort, amazing results can be achieved. A filter effect is actually a series of graphics operations applied to a given source graphic that produces a modified graphical result. The result of the filter effect is applied to the target graphic instead of to the original source graphic.

The <filter> element is used to define a filter, then that element is assigned an id attribute name. Utilizing the name of the id attribute in a coded statement references that particular <filter> element. Throughout this book, we will always place the <filter> element within a <defs> element. However, unlike gradients and patterns, which must be placed within a <defs> element, a filter does not ...

Get SVG for Web Developers 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.