Using an feImage Filter Primitive

---

Using an feMerge Filter Primitive

Consider the image rendered in Figure 7.6.

Figure 7.6: An feMerge filter primitive.

The SVG document in Listing 7.6 demonstrates how to use an feMerge filter primitive.

Listing 7.6 mergeFilter1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <defs> <filter     filterUnits="objectBoundingBox"    x="0" y="0" width="100" height="100">    <feImage xlink:href="simpleHouse1.gif"      x="0" y="0"      width="100" height="100"      result="outputImage1"/>    <feGaussianBlur stdDeviation="5"                    in="outputImage1"                    baseFrequency="0.01"                    result="imageOutput2"                    x="0" y="0"                    width="100" height="100"/>    <feMerge>      <feMergeNode in="imageOutput2"/>      <feMergeNode in="simpleHouse1.gif"/>    </feMerge> </filter> </defs> <g transform="translate(50,50)">   <rect      x="0" y="0" width="100" height="100"      filter="url(#feMergeFilter1)"/> </g> </svg> 

Remarks

The SVG code in Listing 7.6 renders a GIF file that has been 'processed' by an feGaussianBlur filter primitive; in this case the output is a blurry-looking image of a house. The feGaussian filter primitive (which is defined in an SVG defs element) is given below:

<feGaussianBlur stdDeviation="5"                 in="outputImage1"                 baseFrequency="0.01"                 result="imageOutput2"                 x="0" y="0"                 width="100" height="100"/>

The feMerge filter primitive, which is also in the SVG defs element, is defined with the following code fragment:

<feMerge>   <feMergeNode in="imageOutput2"/>   <feMergeNode in="simpleHouse1.gif"/> </feMerge>

Finally, the result of applying the feMerge filter primitive occurs within the following code fragment:

<g transform="translate(50,50)">   <rect      x="0" y="0" width="100" height="100"      filter="url(#feMergeFilter1)"/> </g>

---