Worked Example – Middle East Oil
Adding a little pizzazz with SVG
So far, the chart is ideal for the printed page, but lack oomph as an online presentation. A good start would be to run on a dark background, with just a subtle amount of lighting to keep it interesting. Then we can countershade the bars, and maybe add a 3D effect to the piechart.
The great thing about this is how few extra bytes are added to the final graphic - the finished artwork is still a mere 6K bytes, so it appears almost instantly in your browser.
So how was it done?
SVG has a very simple and economical approach to gradient fills. In this example, the background is generated by the gradient definition:
<![CDATA[ <linearGradient id="backcloth" gradientTransform="rotate(15)" >
<stop offset="5%" style="stop-color:#00C"/>
<stop offset="95%" style="stop-color:#004"/>
</linearGradient>]]>
In GraPL.net 2.0 this may be included in the output SVG, and referenced as a custom tile pattern for the FrameAttributes property of the chart. Similarly, the counter-shading for the bars, which is defined as:
<![CDATA[ <linearGradient id="fill2" gradientTransform="rotate(60)">
<stop offset="5%" style="stop-color:#F60"/>
<stop offset="95%" style="stop-color:#FF6"/>
</linearGradient>]]>
... and again is simply set as the Patterns property so that it tiles all the bars. The 3D effect on the pie wedges is a little more complex:
<![CDATA[ <filter id="pietile">
<desc>Produces a 3D lighting effect suitable for pies and lines</desc>
<feGaussianBlur in="SourceAlpha" stdDeviation="12" result="blur"/>
<feOffset in="blur" dx="12" dy="9" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
specularExponent="30" style="lighting-color:White"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha"
operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>]]>
This is all very well explained in the SVG documentation. Essentially we start by making a blurred shadow (offset a little) and then use the undisplaced shadow as a height-map to be illuminated by a point light-source placed in the top corner of the chart, high above the monitor surface. The lit surface is first masked by the original graphic, then the whole picture is merged with its shadow to make the final effect. It is all very simple to code, and very powerful.
When can I do this with GraPL.NET?
GraPL.net v2.0 allows you to include any SVG definitions in-line with the final output, so you are limited only by your imagination. Version 2.1 will include a wide selection of common gradient effects as named 'patterns' which will work compatibly in VML and PDF as well as in SVG.
