Using SVG Filters

An SVG filter is created from one or more filter primitives; for example, a Gaussian Blur. An SVG filter is made up of one or more filter primitives nested within a <filter> element. The skeleton for the source code of any SVG image that uses filters looks something like this:

Listing 7.1. (FilterSkeleton01.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> 
<defs> 
<filter id="GetAHandle"> 
<!-- Filter primitives go here. --> 
</filter> 
</defs> 
<!-- SVG text or graphics shapes go here. --> 
</svg> 

The definition of the filter is nested within a <defs> element. The filter itself is defined within a <filter> element that has, ...

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.