Files used

Right-click, save ...

• serverside_svg_php.shtml
• serverside_svg_php.psvg.txt (remove txt-extension after download)

Technical Details

In order to use PHP in conjunction with SVG you have to do two additions in your webservers config-file. We will describe the Apache case, because it is the most-popular webserver. We assume that PHP is already installed and working correctly. First you need to add the type "psvg" to your mime-type file so that the relevant line reads like image/svg+xml svg svgz psvg. The mime-types are usually either located at /etc/mime.types or /etc/httpd/mime.types. Secondly you have to add an additional SVG-handler in the apache config-file, so that your relevant line reads like: AddType application/x-httpd-php .php .php4 .phtml .psvg, assuming you call your php-generated svg-files .psvg. The Apache config-file is most likely found at /etc/httpd/httpd.conf or /etc/apache2/apache2.conf. If you have problems getting PHP up and running then please refer to the www.php.net documentation.

We give our file a different extension in order to distinguish it from static SVG-files. In our case we give it the .psvg-extension as described above.

PHP allows the inclusion of PHP logic into static SVG-files, thus getting dynamic content into SVG. Data-Sources can be other files, XML, databases or other applications. One can either embed PHP in SVG or vice-versa, quite similar to perl and embedded perl. We first show the complete code and describe it afterwards. PHP-Code is colored in red, while regular SVG is in blue. We use here the short hand php syntax, replace <? with <?php and <?= with <?php echo or <?php print if this file does not work as expected.

01 <?
02 header("Content-type: image/svg+xml");
03 print('<?xml version="1.0" encoding="iso-8859-1"?>');
04 $svgwidth=500;
05 $svgheight=400;
06 ?>
07 
08 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                         "https://www.w3.org/TR/SVG/DTD/svg10.dtd">
09 <svg width="<?=$svgwidth;?>px" height="<?=$svgheight;?>px"
10 xmlns="https://www.w3.org/2000/svg">
11 	<desc>This is a php-random rectangle test</desc>
12 <?
                         //initalizing random generator
13 srand((double) microtime() * 1000000);
14 for ($i = 0; $i < 20; $i+=1) {
                         //avoid getting a range 0..0 for rand function
15   $x = floor(rand(0,$svgwidth-1));
16   $y = floor(rand(0,$svgheight-1));
                         //avoid getting rect outside of viewBox
17   $width = floor(rand(0,$svgwidth-$x));
18   $height = floor(rand(0,$svgheight-$y));
19   $red = floor(rand(0,255));
20   $blue = floor(rand(0,255));
21   $green = floor(rand(0,255));
22   $color = "rgb(".$red.",".$green.",".$blue.")";
23   print "\t<rect x=\"$x\" y=\"$y\" width=\"$width\" height=\"$height\" 
                        style=\"fill:$color;\"/>\n";
24 }
25 ?>
26   <text x="<?=$svgwidth/2;?>px" y="300" style="font-size:15;"
                       text-anchor="middle">The servers Date and Time is: 
                       <? print (strftime("%Y-%m-%d, %H:%M:%S")); ?></text>
27   <text x="<?=$svgwidth/2;?>px" y="340" style="font-size:15;"
                      text-anchor="middle">You are running:</text>
28   <text x="<?=$svgwidth/2;?>px" y="360" style="font-size:15;"
                      text-anchor="middle">
                      <? print $HTTP_USER_AGENT; ?></text>
19 </svg>

As you might have noticed we have to use special tags to separate PHP-code from SVG-code. All code within <? and > is PHP and replaced on the server at runtime when requested, thus sending pure SVG-code to the client.

The first 6 lines send content-type, xml-header and initializes variables. We heave to print the xml-header using PHP, because the xml-header conflicts with the tags responsible for distinguishing SVG and PHP.

Lines 8 to 12 show the stand doctype-declaration, the svg root-element and a description-tag. Note that we use php-variables to replace the width and height-section. PHP variables - similar to perl - start with a dollar-sign.

Lines 13 to 26 initializes the random-generator (using the actual system-time) and embeds a php for-loop. This loops randomly generates x-, y-, with- and height-values for the rectangles, as well als rgb-color-values. With the print-statement we send the output to the client.

Finally we draw three text-elements, writing out the servers current date and time and the user-agent (browser-type) using PHP-functions and environment-variables.

Further resources on PHP:

• www.php.net
• www.phpbuilder.com

The author of this example is a strong supporter of open-source technology and data-formats. Open source servers and daemons are running large parts of the internet infrastructure and are in most cases of high-quality, tested and supported by a very active user-community. Linux, Apache, perl, php, gnu-tools and compilers, kde, gnome, gimp and many more are shining examples of quality and reliability of open-source projects. The power of combining SVG, Javascript, PHP and databases allows to implement nearly all interactive online-services you can think about.

For the GIS and mapping-community the combination of the above techniques with spatial extensions to databases, with spatial queries and analysis seems very promising. Examples: PostgresGIS and Oracle Spatial.