SVG images are here, soon they will pretty standard on the web. The Adobe SVG plugin allows users to view the images and soon Mozilla Firefox will have SVG support built in so that no external plugin will be necessary.

Why use SVG images instead of standards like JPG or PNG?

• In most instances they are smaller.
• They do not lose quality when they are magnified in size.
• They are easier to use and manipulate than standard image formats.
• You can generate them from your application without needing a special library (like the gd library).

Why not use SVG images?

• They do require a browser plugin to view.
• Easy manipulation is not always a good thing.

This document is directed towards generating graphs with PHP, but you could just as easily generate any other type of image. It is almost as simple as generating simple HTML. Consider this as a small example of what can be done.

Your first SVG graph

First we’ll take a look at the SVG code needed to create simple bargraph.

<svg width="12cm" height="9cm" viewBox="0 0 1200 900" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g><text x="150" y="1" font-size="75" fill="black" >Sales (in millions)</text></g>
<rect x="95" y="405.56" width="122.22" height="494.44" fill="#ffbbbb" stroke="black" stroke-width="1" rx="2" />
<rect x="217.22" y="455" width="122.22" height="445" fill="#bbffbb" stroke="black" stroke-width="1" rx="2" />
</svg>

This is only a partial bargraph (2 bars), so don’t get too excited yet. The syntax should look very familiar to anyone who has used HTML or XML (which SVG is).

The first and last lines are defining the document as an SVG document.

<svg width="12cm" height="9cm" viewBox="0 0 1200 900" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>


The second line draws the title “Sales (in millions)” at the top of the image in a large font.

<g><text x="150" y="1" font-size="75" fill="black" >Sales (in millions)</text></g>


The remaining two lines are where the two boxes are drawn, one for each data point.

<rect x="95" y="405.56" width="122.22" height="494.44" fill="#ffbbbb" stroke="black" stroke-width="1" rx="2" />
<rect x="217.22" y="455" width="122.22" height="445" fill="#bbffbb" stroke="black" stroke-width="1" rx="2" />


Piece of cake, right? Well, if you look at the svg that code creates you’ll notice that it isn’t much to brag about. There are no gridlines, titles on the axis’ and no labels.

Well, you already know how to make text, so the titles and labels shouldn’t be a problem. You do need to know how to make lines though:


<line x1="90" y1="1" x2="90" y2="900" stroke-width="5" />

The above code creates a line from point x₁,y₁ to point x₂,y₂ with a width of 5 points. Now you know everything you need
to know to create a good SVG graph.

Your first PHP-generated SVG graph

Well, now I know how to create an SVG image, but how do I create a dynamic image from PHP?

I’m glad you asked. Well it is mostly just echoing the above information to the browser, but instead of outputing those 2 stagnant rectangles you should use a loop. By looping through your data and generating a bar for every data point you can easily generate the graph you came here looking for.


//These are our data points:
$data = array( "2003" => 54, "2004" => 55, "2005" => 60);

//Take the maximum value divided by the graph height:
$divisor = 60 / 900;

//here we find the max size each bar should be to fit nicely
//on the page:
$bar_width = round( 1200 / count( $data ), 2 );

$x_loc = 1;

foreach( $data as $key => $value )
{

   //The height for this data point's bar:
   $bar_height = round( $value / $divisor, 2 );

   //The starting point for this bar (the y-coordinate):
   $y = ( 900 ) - $bar_height;

   //The x,y coordinates for the vertical text on each bar:
   $text_x = $x_loc + $bar_width - 10;
   $text_y = 890;


   //This is the bar:
   $svg .= "<rect x=\"".$x_loc."\"   y=\"".$y."\" width=\"".$bar_width."\"   height=\"".$bar_height."\" fill=\"#eeffee\"   stroke=\"black\" stroke-width=\"1\" rx=\"2\"   />\n";

   //Then the text on top of the bar. We are rotating it -90 degrees which
   //is really the same as 270 degrees, but with less numbers. We are putting the
   //x-axis label in normal text then putting the actual value next to it in
   //a small blue font:
   $svg .= "<g><text x=\"".($text_x)."\"   y=\"".($text_y)."\" font-size=\"55\"   transform=\"rotate(-90,$text_x,$text_y)\" fill=\"black\"   >$key <tspan font-size=\"30\"   fill=\"blue\">($value)</tspan></text></g>\n";

   //Start the next bar at the end of this one:
   $x_loc += $bar_width;

}

echo $svg;


Now we are getting somewhere. Just by changing the datapoints we can now have a completely different graph each time. And there was much rejoicing. yeah.

That’s great, but what about other graphs?

Bar graphs aren’t going to work for you everytime, so you’ll probably need to expand your horizons to include line graphs and the dreaded pie graphs. *shudder*

They are done mostly the same way, only with more math and less sanity. The sample page has examples of all three and the library has everything you need to do these on your own (and without having to write it yourself!).

“Just give me the dang code already!”….Okay fine. Have it your way:
Sample Generated Graphs (svg browsers only)
Download the library and the sample code