Vector graphics have the advantage of being quick to download because rendering is done on the client-side. However, most designers resort to using bitmap formats in order to produce rich, textured and dimensional-looking graphics. Among the many disadvantages of this approach is the general difficulty of keeping the raster data in sync with the rest of the Web site. The designer must return to the source image editor to simply change the title of a button, and then must re-export the file for Web use.

SVG's filter effects enable designers to create vector graphic images that display using a variety of popular filter effects. This capability permits the production of Web artwork in such a way that client-side generation and alteration can be performed easily. This means that content for your vector artwork can be generated dynamically, and then rendered with sophisticated filter effects. You now get the best of many worlds with compact vector graphics, scriptable text content, and rendered filter effects.

Filter effects are defined by a <filter> element with an associated ID. Filter effects are applied to elements that have a "filter" property that reference a <filter> element. Here is an example:

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03March 2000//EN" "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="4in" height="3in"> <defs><filter id="CoolTextEffect"><!-- Definition of filter goes here --></filter></defs> <text style="filter:url(#CoolTextEffect)">Text with a cool effect</text> </svg>

Two key attributes for filter effects are the SourceGraphic and SourceAlpha. The SourceGraphic is the original input for the <filter> element: that is, the graphic element that the filter effect is being applied to. The SourceAlpha is the same as the SourceGraphic, except that it contains only the alpha channel. The alpha channel includes any anti-aliasing specified for the element.

The combination of various filters can produce a variety of effects. The image processing model waits until all of the filter effects for an element are compiled (layered) before rendering the final image.

The following image incorporates a combination of Gaussian Blur and Specular Lighting:

Below is a breakdown of each filter used to produce this image.

<filter id="MyFilter" filterUnits="userSpaceOnUse">
<!--Copyright 1999 Adobe Systems. You may copy, modify, and distribute this file, if you include this notice & do not charge for the distribution. This file is provided "AS-IS" without warranties of any kind, including any implied warranties.-->
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.9"
specularExponent="20" lightColor="white" result="specularOut">
<feDistantLight azimuth="135" elevation="30"/>
</feSpecularLighting>
<feComposite in="specularOut" in2="SourceAlpha" operator="in"
result="specularOut"/>
<feComposite in="SourceGraphic" in2="specularOut" operator="arithmetic
" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>