Examples Using SVG Filters

In this section, I can only hope to give you a flavor of what is possible with SVG filters. However, I think that I’ve provided enough to whet your appetite to spend time experimenting with them. Certainly, some impressive visual effects are possible.

Gaussian Blur

The <feGaussianBlur> filter primitive defines in Listing 7.8 a generic filter you can use. In the first <use> element, you adjust the opacity of the Gaussian blur to 0.4:

Listing 7.8. (SimpleShadow.svg)
 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="500" height="300"> <defs> <filter id="MyGaussianFilter"> <feGaussianBlur stdDeviation="1.5"/> </filter> ...

Get Designing SVG Web Graphics now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.