SVGGraph background image support

« Return to SVGGraph page

From version 2.2, SVGGraph supports using an image for the graph background. The examples on this page demonstrate what can be done with it.

Opacity

The 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 the SVGGraph back_colour (in this case '#333') shows through the transparent areas.

back_image_opacity = 1.0
(default value)
back_image_opacity = 0.3

Modes

There are three different modes available for how the image will be scaled and/or stretched. The first and default mode is auto:

Auto

back_image_mode = auto

When back_image_mode is set to auto, the image is shown using the correct aspect ratio, and fitted within a box with dimensions set by the back_image_width and back_image_height options. This box may be positioned using the back_image_left and back_image_top options.

back_image_mode = auto
(default mode)
back_image_width = 100
back_image_width = 100
back_image_left = 50
back_image_top = 60

For simplicity these captions are using pseudocode - values should be properly specified as elements of the settings array passed into the SVGGraph constructor, e.g. $settings['back_image_mode'] = 'auto';

The second background image mode is stretch:

Stretch

back_image_mode = stretch

With back_image_mode set to stretch, the image is stretched non-uniformly to fit the whole rectangle specifed by the back_image_width and back_image_height options. As with auto mode, the position of the box is controlled by the back_image_left and back_image_top options.

back_image_mode = stretch
back_image_mode = stretch
back_image_width = 100
back_image_mode = stretch
back_image_width = 100
back_image_left = 50
back_image_top = 60

And finally tile mode:

Tile

back_image_mode = tile

As with auto mode, the image is uniformly stretched to fit the box specified with the back_image_width and back_image_height options. The box is then used in an SVG <pattern> to tile the image across the whole of the background.

The back_image_left and back_image_top options may be used to offset the image box, as in the third example below.

back_image_mode = tile
back_image_mode = tile
back_image_height = 60
back_image_mode = tile
back_image_width = 100
back_image_height = 60
back_image_left = 50
back_image_top = 30

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.

« Back to top of page Responsive design »