SVGGraph background images and shadows
Version 2.2 of SVGGraph added support for using an image for the graph background, and version 3.4 added the option of displaying a drop shadow effect for the main graph elements. Both are shown in the example graph below.
Setting a background image
This should be a really simple option, but it can be a bit confusing. The
option to set is
back_image and you must set it to the location of
the image to display. The important point to remember about this is that the
image file is referenced in the SVG code's
in the same way that the
attribute works in HTML.
// absolute URI
$settings['back_image'] = 'http://www.my-domain.com/images/background.png';
// SVGGraph output:
<image xlink:href="http://www.my-domain.com/images/background.png" ... />
In the example above I set the image to a fully-qualified URI - this should work wherever your SVG output ends up (as long as whatever is reading the SVG supports images).
// absolute path
$settings['back_image'] = '/images/background.png';
// SVGGraph output:
<image xlink:href="/images/background.png" ... />
This time I used an absolute path for the image location. This should work as long as the SVG is rendered from a website to a browser. If you save the SVG document out or pass it to an external program, the image will probably not be found.
// relative path
$settings['back_image'] = 'images/background.png';
// SVGGraph output:
<image xlink:href="images/background.png" ... />
This time a relative path has been used - the image must be in a (real or virtual) subdirectory called "images" beneath the path of the SVG document. Here are a few examples of where your images should be to work properly:
<embed> to load
graph.php from the same directory. The
script calls SVGGraph using 'images/backgroumd.png' as the
index.php graph.php (loaded using <embed>) images/background.png
Example 2: the
graph.php file has been moved into a subdirectory
svg. Still using
embed to load the script, the
background image is now expected to be in a subdirectory of
index.php svg/graph.php (loaded using <embed>) svg/images/background.png
Example 3: the
graph.php file is now an include, loaded into
index.php and run to insert the SVG into the HTML of the main page.
The background image is now relative to the
index.php svg/graph.php (included and run) images/background.png
Dude, where's my image?
The examples above should cover the most common cases, but if you have trouble with the location of your images check the browser console and / or web server log. There should be a "404 not found" error message that will tell you where the browser is trying to find the missing image.
back_image_opacity option modifies the opacity of the
background image. The "SVGGraph" image used in these examples is a PNG with an
alpha channel and a predominantly transparent background. The value given for
back_colour (in this case
through the transparent areas.
There are three different modes available for how the image will be scaled
and/or stretched. The first and default mode is
back_image_mode is set to
auto, the image is shown
using the correct aspect ratio, and fitted within a box with dimensions set
options. This box may be positioned using the
For simplicity these captions are using pseudocode - values should be properly
specified as elements of the settings array passed into the SVGGraph constructor,
$settings['back_image_mode'] = 'auto';
The second background image mode is
back_image_mode set to
stretch, the image is
stretched non-uniformly to fit the whole rectangle specifed by the
options. As with
auto mode, the position of the box is controlled
auto mode, the image is uniformly stretched to fit the
box specified with the
options. The box is then used in an SVG
<pattern> to tile the
image across the whole of the background.
back_image_top options may
be used to offset the image box, as in the third example below.
In the first example above, no tiling takes place - this is because neither the width or height have been specified, therefore the image box takes up the whole of the SVG document.
In the second example above, the image height has been set so that the image is tiled vertically, and in the third example both width and height are set to tile the image in both directions.
Shadows are enabled with the
show_shadow option, with its
default settings demonstrated in the 3D bar graph below.
A bit of a warning: the shadow is added to the document
using an SVG
<filter> element, which should be supported by
any browser but might not be supported by PHP libraries that convert SVG to
There are a few options available for modifying the appearance of the shadow:
(These links lead to the relevant options index page.)
Background shadows are enabled with the
which draws a drop shadow inside the SVG document.
The thickness of the shadow is set with the
itself, and you can set the opacity of the shadow with the
option. Blurring the shadow is enabled with the
option, which uses an SVG filter - so the same warning applies as for the graph