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. the figure below 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.

/* Style sheet for the presentation slides */ This is the compete filter, producing pesudo 3d, highlight, and blurred drop shadow Filtered to improve the image Filtered SVG composited onto Canvas Canvas SVG doc

The figure below 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 the third diagram.

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)"/>
Dataflow of filters shown with an interactive diagram. Dynamic presentation of a filter dataflow network. A network of "boxes" is shown, each representing a filter. One can click on each of the boxes and this is replaces by the corresponding duck with filters performed. The duck image... All the various filters in real... This is the compete filter, producing pesudo 3d, highlight, and blurred drop shadow Gaussian Blur Blur plus offset portion Blur plus specular highlight Blur plus specular highlight arithmetically composited with the original image The result of the arithmetic composition is composited with the original source The dataflow paths SourceAlpha blur blur offsetBlur specOut SourceAlpha specOut2 SourceGraphic litPaint Image Alpha Image Results can go to several places Alpha, RGB of image or background can have filters applied The Dataflow boxes... Gaussian Blur Source Offset (arithmetic) Composite Merge Specular Highlight Composite The ducks... The original, flat image of the duck The alpha channel of the duck blurred The alpha channel of the duck blurred and shifted: dropped shadow The alpha channel of the duck with specular highlight added The highlighted but blurred duck cut on the duck contour The highlight effects combined with the original image The hightlight combined with the shadow: the full image The Interaction facilities

An example of filters in use:

Dataflow of filters shown with an interactive diagram. Dynamic presentation of a filter dataflow network. A network of "boxes" is shown, each representing a filter. One can click on each of the boxes and this is replaces by the corresponding duck with filters performed. The duck image... All the various filters in real... This is the compete filter, producing pesudo 3d, highlight, and blurred drop shadow Gaussian Blur Blur plus offset portion Blur plus specular highlight Blur plus specular highlight arithmetically composited with the original image The result of the arithmetic composition is composited with the original source The dataflow paths SourceAlpha blur blur offsetBlur specOut SourceAlpha specOut2 SourceGraphic litPaint Image Alpha Image Results can go to several places Alpha, RGB of image or background can have filters applied The Dataflow boxes... Gaussian Blur Source Offset (arithmetic) Composite Merge Specular Highlight Composite The ducks... The original, flat image of the duck The alpha channel of the duck blurred The alpha channel of the duck blurred and shifted: dropped shadow The alpha channel of the duck with specular highlight added The highlighted but blurred duck cut on the duck contour The highlight effects combined with the original image The hightlight combined with the shadow: the full image The Interaction facilities

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.