Filters in SVG
SVG Fills & Filters
3D Pies and Lines
Causeway Graphical Systems|
Working with Gradient Fills and 3D Filters in SVG
View this example as SVG
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:
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:
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.
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
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!
Website maintained by email@example.com
Telephone: +44 (0) 1439 788413