Filters are a really powerful addition to SVG's toolkit, allowing you to apply effects similar to those found in Adobe Photoshop, using techniques including displacement maps, colour matrices, simple image merging, transforms and gaussian blurs.

You'll remember that we're creating a new dashboard - and various associated reports along with it - for our intranet (and if you don't, you can take a look at all the SVG-related posts on this blog to refresh your memory). This means, for some people, replicating as much as possible from existing Excel spreadsheets that currently do the job.

One particular report contains a bunch of single slice pie-charts, which tells people how they're performing in a particular area of the business:

Given our recent successes with SVG, when I saw this report, I knew it'd be dead easy to replicate in SVG so, once again, I fired up TextMate and threw some code together. The original report has a drop shadow underneath the pies themselves, which is fairly easy to replicate using SVG filters:

<filter id="dropShadow">
    <feOffset in="SourceAlpha" result="Shadow" dx="0" dy="1" />
    <feColorMatrix in="Shadow" result="FadeShadow" type="matrix" values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0" />
    <feGaussianBlur in="FadeShadow" result="BlurShadow" stdDeviation="3" />
    <feBlend in="SourceGraphic" in2="BlurShadow" mode="normal" />
</filter>

All of the other drop shadows on the intranet are 25% black (though for demonstration purposes, I've used 50% in this example), use a 1px vertical offset and 3px blur. Using SVG filters, this means we need to apply four steps:

• Use the offset filter - feOffset - to take the source alpha of our element, and move it 1 pixel down
• Use the colour matrix filter - feColorMatrix - to reduce the shadow to 50% of it's intensity
• Use the blur filter - feGaussianBlur - to blur the shadow
• Use the blend filter - feBlend - to add both graphics together to achieve the drop shadow effect

The feBlend filter can use different modes, much in the same way as Photoshop, to achieve different effects - in this particular case, I've just used a normal mode. As you can see from the images below, the results look pretty good in Chrome, Opera and Firefox, but the effect fails to render in Safari, SVGWeb or IE9 Platform Preview 2. Support still feels a very long way off in IE9 (update: see Massive leap for SVG support in IE9 Platform Preview 3):

(download)

Click here to download:

support-for-svg-filters-in-the-major-browsers-wssopmAJJDbnbIgrBoDD.zip (423 KB)

It's a real shame that, whilst filters which are available in WebKit, they don't appear to be supported in the current releases of Safari for both Windows and OS X. A lot of focus appears to be put on the canvas implementation, but little things like this, which could easily be switched on, don't appear to get any love.

So whilst SVG filters are really very powerful, for the time being they're still not supported fully across all browsers - but just like HTML and CSS, that doesn't stop us from using the features for those browsers that do support it.

SVGWeb continues to impress

I'm still very much impressed with SVGWeb, in that it can take the SVG and translate it into something that most Internet Explorer browsers can stomach - an Adobe Flash movie which will display it relatively well. But it's still Flash, and in some cases where the SVG markup is particularly heavy, it can take a second or two for the image to display.

There are other ways, I know. Libraries such as Raphaël are available that will create SVG and VML for IE, but this requires us to switch away from using actual SVG markup and move to a more API-like way of creating graphics - I don't really want to go down that route - not just yet anyway.

So I just can't help but wonder if there's something which would perform the same process as SVGWeb, but output VML instead. If you know of any projects, then I'll be happy to be a willing beta tester, evaluate it and report back.

In the meantime, we'll be sticking to SVGWeb.