O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required