Using an feMerge Filter Primitive

---

Using an feTurbulence Filter Primitive

Consider the image rendered in Figure 7.7.

Figure 7.7: An feTurbulence filter primitive.

The SVG document in Listing 7.7 demonstrates how to use an feTurbulence filter primitive in order to create a turbulence effect.

Listing 7.7 turbulenceFilter1.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%">      <feTurbulence type="turbulence"                    baseFrequency="0.01"                    numOctaves="1"/>   </filter>   </defs>   <rect      x="0" y="0" width="800" height="400"      filter="url(#filter1)"/> </svg>

Remarks

The graphics image rendered by Listing 7.7 befits the name of the filter-it does indeed look turbulent! The feTurbulence filter primitive (which is defined in an SVG defs element) is:

<filter          filterUnits="objectBoundingBox"     x="0%" y="0%"     width="100%" height="100%">     <feTurbulence type="turbulence"                   baseFrequency="0.01"                   numOctaves="1"/> </filter>

The feTurbulence filter primitive is 'associated' with a rectangle by means of the following code fragment:

<rect    x="0" y="0" width="800" height="400"    filter="url(#filter1)"/>

Experiment with this filter by trying different combinations of values for the baseFrequency attribute and the numOctave attribute and see how the values of these attributes affect the graphics image. The feTurbulence filter primitive can be used for creating ethereal or impressionist-like effects, particularly when it's combined with other SVG elements. The next example shows how to combine an feTurbulence filter primitive with an SVG pattern element.

---