11. Filtering

11. Filtering

• 11.1 Introduction

11.1 Introduction

Graphics on the Web is often used for artwork (logos, presentations, advertisments) where there is a need for adding effects to the graphics produced by SVG. SVG therefore allows a post-processing operation that provides some image processing effects to the SVG graphic before it is rendered on the display device. Fig 11.1 shows the basic process. Instead of the SVG graphic being sent straight to the display, if filter operations are defined, the graphical information is composed onto a canvas and the filters are applied to the canvas and the resulting graphic is sent to the display device.

Normally, a single operation is unable to create the desired effect so SVG provides 15 basic filter primitives that can be linked together in a network to create the desired effect.

Figure 11.1: Filtering

Figure 11.2 shows a typical filter network. Various aspects of the image can be manipulated separately. In this example the source alpha transparency value is input to a filter that first blurs and then displaces the image to create the effect of a drop down shadow. The blurred alpha image is also had lighting applied to it and this is eventually composited with the original image to give the effect of a polished brown object with yellow lighting. As you can see, the production of a filter network is not completely intuitive. Most SVG drawing packages provide a set of standard filters for widely used effects. The result of the filter network at each stage is shown in Figure 11.3.

The code for that filter is shown below. Each filter has in and out attributes that create the network. The individual filters have attributes to give variations on the general effect.

<filter id="Full">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="6" dy="6" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="8" specularConstant="1.5" specularExponent="10" 
    result="specOut">
  <fePointLight x="-5000" y="-10000" z="10000"/>
</feSpecularLighting><feComposite in="specOut"in2="SourceAlpha" operator="in" 
   result="specOut2"/>
<feComposite in="SourceGraphic"in2="specOut2"operator="arithmetic" 
    k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
  <feMergeNode in="offsetBlur"/>
  <feMergeNode in="litPaint"/>
</feMerge>
</filter>

<use xlink:href="#duck" style="filter:url(#Full)"/>

Figure 11.2: Filter Network

Figure 11.3: Filter Network applied to the Duck

An overview of the filters available are as follows:

• Blending, compositing, merging: feBlend, feComposite, feMerge
  • pixel-wise combination of two images
• Colour manipulation: feComponentTransfer, feColorMatrix
  • brightness, contrast adjustment, colour thresholding
  • direct colour matrix manipulation
• Convolution (blurring, sharpening, etc): feConvolveMatrix
• Diffuse and specular lighting: feDistantLight, feSpecularLighting
  • separate elements to control light source elements and properties:
  • distant light, point light, spot light
• Displacement map: feDisplacementMap
  • displace pixels in one image under the control of another
• Offset: feOffset
• Gaussian blur: feGaussianBlur
• Fattening/thinning (ie, dilation or erosion): feMorphology
• Tiling: feTile, feFlood
• Generation of artifical textures (turbulence functions): feTurbulence

Filters are applied just before the graphics is rendered. They are often expensive in computation and, in consequence, can be difficult to animate efficiently.