Shadows and the feGaussianBlur Filter Primitive | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Creating an feGaussianBlur Filter Pattern

Consider the image rendered in Figure 7.3.

click to expand
Figure 7.3: An feGaussianBlur filter pattern.

The SVG document in Listing 7.3 demonstrates how to use the SVG feGaussianBlur filter primitive and the SVG pattern element in order to render a pattern of blurred filters.

Listing 7.3 rectBlurFilterPattern1.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="55" height="25">      <feGaussianBlur stdDeviation="8"/>   </filter>   <pattern             width="60" height="30"            patternUnits="userSpaceOnUse">      <rect         x="0" y="0"         width="60" height="30"         filter="url(#blurFilter1)"         fill="red" stroke="black" stroke-width="4"/>   </pattern> </defs> <g transform="translate(20,20)">   <rect      x="0" y="0" width="600" height="300"      style="fill:url(#multiPattern)"      fill="red" stroke="gray" stroke-width="2"/> </g> </svg>

Remarks

The SVG code in Listing 7.3 renders a rectangular grid of rectangles. Each rectangle in the grid is rendered with a powder-like faded effect that seems palpable, reminiscent of certain paintings in modern, abstract art.

The rectangle in the SVG defs element has a width of 55 pixels and a height of 25 pixels; in every other respect, it is the same as the rectangle in the SVG defs element in Listing 7.1

The second part of the SVG defs element contains an SVG pattern element that is listed below:

<pattern       width="60" height="30"           patternUnits="userSpaceOnUse">     <rect        x="0" y="0"        width="60" height="30"        filter="url(#blurFilter1)"        fill="red" stroke="black" stroke-width="4"/>   </pattern>

Notice that the SVG rect element has a width of 60 pixels and a height of 30 pixels, which makes it slightly larger than the rectangle defined in the SVG feGaussianBlur filter primitive. This slight difference in dimensions underlies the way in which the textural effect is created.

The rendering is performed in an element that is nested inside the SVG g element, which contains an SVG translate function that shifts the origin from point (0,0) to point (20,20). Next, the SVG g element renders a rectangular grid with the following code fragment:

<rect    x="0" y="0" width="600" height="300"    style="fill:url(#multiPattern)"    fill="red" stroke="gray" stroke-width="2"/>

The rectangular grid is 600 pixels wide and has a height of 300 pixels, with a gray perimeter that is two pixels wide. The rectangle contains a fill attribute whose value is multiPattern, which references an SVG pattern element defined in the SVG defs element, and that element (in turn) references an SVG filter element that contains an feGaussianBlur filter primitive (which is also defined in the SVG defs element).