JUMP START HTML5 (2014)

Chapter 20 Canvas & SVG: SVG Filter Effects

You can use filter effects in SVG. If you use any graphic design or photo manipulation packages, then you're almost certain to have come across filters before. The filters in SVG include:

· feBlend

· feColorMatrix

· feComponentTransfer

· feComposite

· feConvolveMatrix

· feDiffuseLighting

· feDisplacementMap

· feFlood

· feGaussianBlur

· feImage

· feMerge

· feMorphology

· feOffset

· feSpecularLighting

· feTile

· feTurbulence

· feDistantLight

· fePointLight

· feSpotLight

If you've used image-editing software you'll probably be familiar with what filters do. Essentially, they apply effects to an image such as bezels, blurring, soft-focus, and so on. In essence, think of filter elements as a form of image processing for the Web. Filter elements can be used in most modern browsers, with the exception of Blackberry Browser. For an example of what filters can do, take a look at Microsoft's hands on: SVG Filter Effects.

Using Filter Effects

Especially if you're new to using filters, it's a good idea to begin testing and experimenting with one filter at a time, otherwise you could end up with some pretty weird-looking images. For a comprehensive overview and sample code on filters, take a look at the SVG/Essentials Filters page on O'Reilly Commons.

Below is an example of the code used to create a circle (which you've already learned how to create) with the feGaussianBlur filter applied. You can see the output in Figure 20.1.

<!DOCTYPE html>

<html>

<body>

<defs>

</filter>

</defs>

<circle cx="200" cy="200" r="200" stroke="red"

↵stroke-width="5" fill="gold" filter="url(#f1)" />

</svg>

</body>

</html>

A circle with the Gaussian blur filter applied

Figure 20.1. A circle with the Gaussian blur filter applied

Playing with Filters

As you can see, you'll have to give the filter an ID so that this can later be specified in the circle: filter="url(#f1). The parameter that's associated with this filter is stdDeviation; this controls the amount of blurring. So, for example, if you were to set the stdDeviation to a value of 1, then you would get such a minimal amount of blurring as to be hardly noticeable. However, if you were to set this to, say, 200, then it creates a blurring effect that's almost transparent. And as we've applied a red stroke to the image (which you can't really see in the example above), this effect fills the SVG canvas with an extremely blurred circle, as shown in Figure 20.2

A very blurry circle

Figure 20.2. A very blurry circle

If you were to apply a lower value, then the blurring wouldn't be so apparent and would allow the stroke to be seen as an orange color with the yellow blurring into the red, as shown in Figure 20.3.

A less blurry circle

Figure 20.3. A less blurry circle

Let's try combining filter effects. We'll create a drop shadow using the feOffset filter; this is achieved by taking the relevant SVG image or element and moving it in the x-y plane. We'll use the feBlend and feOffset elements, which will create a duplicate image that's slightly offset from the original, to create the effect that one image is sitting behind the other, as shown in Figure 20.4.

<!DOCTYPE html>

<html>

<body>

<defs>

</filter>

</defs>

<polygon points="220,10 300,210 170,250 123,234" fill="blue"

↵stroke="purple" stroke-width="3" filter="url(#f1)" />

</svg>

</body>

</html>

Using multiple filters

Figure 20.4. Using multiple filters

Filters can help you to create excellent effects. For example, if we were to apply feGaussianBlur to the above, then you could blur the rear image to create a kind of 3D effect.

Note: Filter Future

SVG filter technology is coming to CSS3 so you'll be able to apply effects to any HTML element.