View this example as SVG
(requires version-3 of the Adobe viewer for best results)

Let loose the artist in you, and with SVG the result is still a lean and mean download (under 6K for this example). This section of the Causeway site is a gentle introduction to gradient fills and special effects in SVG, and it shows you how you can easily build these into your charts with the latest version of RainPro. The chart shown above is typical of the effects you can produce with remarkably little effort. For best results, you will need the latest version of the Adobe viewer from the SVG section of the Adobe website. FireFox supports gradients very well, but you will miss out on some of the more exotic 3D effects.

Shadows and Offsets

This is a good place to begin, as we can add a nice shadowed effect to chart text with a simple composite filter. First we must develop the filter itself (to learn more about the mechanics of filters in SVG, you should check the latest SVG documentation at www.w3c.org), then we can use a 'defined font' in RainPro to make it available for use by any headings, notes and so on. The filter itself might look something like this:

To use it in your chart definition is simple enough, although you might notice one new function (ch.Include) and an extension to ch.DefineFont to allow us to associate the filter name with the font definition:

 r„Shadow
© Simple shadowed heading
 ch.Include'filters\shadow.txt'
 ch.DefineFont'AS' 'Arial,#MyShadow'
© Make a generous top margin
 ch.Set'MTop' 64
 ch.Set'Heading' 'This is a Shadowed Heading'
 ch.Set'Hfont' 'ASB,24'
 ch.Set'Subhead' 'We could shadow the subhead too!'
 ch.Set'Sfont' 'AR,18'
 ch.Set('style' 'Forcezero')('xlab' 'Jan,Feb,March')
 ch.Bar 3 2½¼6
 PG„ch.Close

... and here is the finished effect, using a bold Arial heading so that you can see the effect clearly:

View this example as SVG (Adobe viewer is best)

Hopefully, you can begin to see the power of the SVG design. Rather than offering a few 'canned' special effects, what they have done is to decompose the filters into small elements, which you can then merge together in any way you choose to make novel and exciting effects. The elements we are using here are:

feGaussianBlur

This takes the alpha-channel information from the source (so if it is semi-transparent it casts a less strong shadow) and the standard-deviation of a Gaussian to create a blurred version of the original object.

feOffset

Of course the shadow is directly under the object at the moment - this shifts it! You can choose the distance to slide, horizontally and vertically.

feMerge

Finally, we assemble the finished result from the displaced shadow and the original text. The source graphic goes last, so that it ends up above its shadow.

OK, that shadowed heading is a bit ugly on its own, so let's add a nice gradient-filled backdrop to complement it!

Simple gradient fills

Gradients in SVG are very easy to define, and render very nicely. In this respect it is a considerable improvement on VML, which does handle gradient fills but the finished effect is much less professional. Here is a basic 'linear' gradient suitable for a backdrop.

View this example as SVG

To get the effect correctly generated by RainPro, you first need to define the gradient as a 'tile' and then this can be set as the background fill for the chart region:

 r„Shadow
© Simple shadowed heading
 ch.Include'filters\shadow.txt' 'filters\light.txt'
 ch.DefineFont'AS' 'Arial,#MyShadow'
 ch.DefineTile 23 '#backcloth'
© Make a generous top margin
 ch.Set'MTop' 64
 ch.Set'Heading' 'This is a Shadowed Heading'
 ch.Set'Hfont' 'ASB,24'
 ch.Set'Subhead' 'We could shadow the subhead too!'
 ch.Set'Sfont' 'AR,18'
 ch.Set'BoxAttr' 'White,23,2'
 ch.Set('style' 'Forcezero')('xlab' 'Jan,Feb,March')
 ch.Bar 3 2½¼6
 PG„ch.Close

Summary

The examples shown here should help to show the potential of SVG in generating state-of-the-art charts which render beautifully in the browser, and have a very low byte-count. If you have been checking the examples, you will have noticed that the SVG is consistently smaller than the equivalent (compressed) PNG equivalent. What is less obvious is that they can be built by a web-server almost instantly, as all the rendering effort is transferred to the CPU running the browser.

The remaining pages in this section of the site show a step-by-step development of some really effective graphics, with a selection of filters and gradients which you might find useful in building charts of your own. Causeway will be gradually building a library of filters and backdrops for use with RainPro and GraPL - if you come up with something particularly effective, please let us know!