SVG Evolution 3: Applying Polish
By Jeff Schiller · 11 Apr, 2007
In Case You Are Just Tuning In
This is the third entry in a series of articles in which we explore how to integrate SVG into DHTML web applications. In our first article, we gave an introduction to SVG language and some of its basic capabilities, including integration with the DOM, demonstrating how to bring SVG to a simple DHTML photo gallery. In the second article, we started to illustrate some of the immediate benefits of SVG, demonstrated declarative animation in order to spice up the user interface, and then provided some useful functionality to our gallery by creating a styled SVG toolbar with some script for flipping the image horizontally/vertically. Here is the SVG photo gallery that we ended up with at the end of the second article.
We are going to take a similar approach with this article, by first demonstrating another major feature of SVG to provide some eye candy and then moving on to enhance the photo gallery's functionality using that feature.
SVG Filters: Not Just Eye Candy
One of the more sophisticated features of Scalable Vector Graphics is SVG Filters. Put simply, a SVG filter modifies the visual appearance of any SVG element before it is rendered to the output device. Filters are made up of filter primitives. Each filter primitive provides a mechanism to produce some RGBA pixels in a single specific way, usually based on some input graphic. For instance, there are filter primitives that apply a gaussian blur to an input image, to provide lighting or to generate noise. Filter primitives can provide a variety of 'knobs' that control its behavior in the form of XML attributes. Of course filter primitives can be combined in interesting ways to achieve impressive visual effects.
Figure 1 - Filter Primitive Concept
I like to think of filter primitives as pluggable components. Each filter primitive has zero or more inputs and one output, that can be hooked up (or "chained") to other primitives. See Figure 1. The behavior of each filter primitive is controlled by attributes as described in the SVG specification.
A filter can consist of only one simple primitive (like a feGaussianBlur), or it can consist of several primitives chained together, with outputs of one stage serving as inputs to the next stage in the filter. Some primitives allow multiple inputs (like the feBlend primitive, which blends two images together) and some have no inputs (like the feTurbulence primitive, which produces noise).
The input to each filter primitive or stage is specified by the in attribute and the output from each filter primitive is named in the result attribute (which can be used by later filter primitives). We will illustrate this concept by building a filter. For our first experiment, we're going to use a filter to demonstrate some eye candy in the form of drop shadows underneath our thumbnail images.