SVG Filters: Technical Effects

SVG (Scalable Vector Graphics) is a vector-based file format that can be used for displaying graphics on the Web and handheld devices. We discuss SVG graphics in detail in both Chapter 10 and Chapter 12, but there are certain effects that can be applied to graphics that are saved in the SVG format. These effects, called SVG filter effects, are really XML-based instructions that are applied when the SVG graphic is rendered in a Web browser or viewer. As a result, these effects are only useful when applied to graphics that will eventually be saved as SVG.

For information on how to create your own SVG filter effects (and download existing code), visit www.w3.org/TR/SVG/filters.html.

Illustrator ships with a collection of 18 SVG filter effects, although if you know how to code them yourself, you can also write your own. To apply an SVG filter effect, select an object and choose Effect > SVG Filters > Apply SVG Filter. Once the Apply SVG Filter dialog is open, you can click a filter from the list and click OK. Alternatively, you can highlight a filter and click the Edit SVG Filter button to modify the selected filter effect, or you can click the New SVG Filter button to create a new SVG filter effect from scratch. Additionally, you can delete selected filters by using the trash icon in the Apply SVG Filter dialog.

SVG Effects should be the last effects applied in the stacking order when multiple effects are being specified, otherwise the SVG Effect will end up being rasterized.

Illustrator can also import SVG filters. To do so, choose Effect > SVG Filters > Import SVG Filter. In the ensuing dialog, open an SVG file with a filter effect in it; when you do, Illustrator will import that filter into your current file.