Chapter 7: SVG Filters

---

Using an feGaussianBlur Filter Primitive

Consider the rectangles rendered in Figure 7.1.

Figure 7.1: An feGaussianBlur filter primitive.

The SVG document in Listing 7.1 demonstrates how to use the SVG filter element with the feGaussianBlur filter primitive in order to render a rectangle with a blurred filter effect.

Listing 7.1 rectBlurFilter1.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%">      <feGaussianBlur stdDeviation="8"/>   </filter>   </defs> <g transform="translate(50,50)">   <rect      x="0" y="0" width="100" height="100"      filter="url(#blurFilter1)"      fill="red" stroke="black" stroke-width="4"/>   <rect      x="200" y="0" width="100" height="100"      fill="red" stroke="black" stroke-width="4"/> </g> </svg>

Remarks

The SVG code in Listing 7.1 starts with an SVG defs element that contains an SVG filter element with a nested feGaussianBlur filter primitive, as shown in the following code fragment:

<filter          filterUnits="objectBoundingBox"     x="0" y="0"     width="100%" height="100%">     <feGaussianBlur stdDeviation="8"/> </filter>

The next element in Listing 7.1 is an SVG g element, which contains the SVG translate function that shifts the origin from the point (0,0) to the point (50,50), as listed below:

<g transform="translate(50,50)">

Next, the SVG g element renders two rectangles, the first of which appears below:

<rect    x="0" y="0" width="100" height="100"    filter="url(#blurFilter1)"    fill="red" stroke="black" stroke-width="4"/>

The first rectangle is red, and it has a width of 100 pixels, a height of 100 pixels, and a black perimeter that is four pixels wide. The upper-left vertex of the rectangle is the point (0,0). The rectangle contains a filter attribute whose value is blurFilter1, which references a filter (containing an feGaussianBlur filter primitive) that is defined in the SVG defs element.

The SVG code for the second rectangle in the SVG g element is given below:

<rect    x="200" y="0" width="100" height="100"    fill="red" stroke="black" stroke-width="4"/>

The second rectangle is also red and has a width of 100 pixels, a height of 100 pixels, and a black perimeter that is four pixels wide. The upper-left vertex of the rectangle is the point (200,0). The rectangle contains a filter attribute whose value is blurFilter1, which references a blur filter that is defined in the SVG defs element.

Experiment with the feGaussianBlur filter primitive and observe how the rendered image is affected as you specify different values for the stdDeviation attribute.

---