main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda


Example for serverside SVG generation with PHP

This example shows the use of serverside SVG generation with PHP. It randomly generates 20 rectangles with different positions, sizes and colors. It additionally displays the servers' local date and time, as well as your user-agent.

Each time you reload the file it will appear different!

Netscape users: Please disable disk and memory cache in order to have a reload every time.

Of course, genereting random rectangles doesn't make much sense for cartography and PHP at all, see Serverside SVG generation with PHP on MySQL and Serverside SVG generation with Perl on MySQL for database connections. Note that basic server configurations are explained only on this page here.

Files used

Right-click, save ...

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 PHP 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 ?>
08 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
09 <svg width="<?=$svgwidth;?>px" height="<?=$svgheight;?>px"
10 xmlns="">
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\" 
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;"
                      <? 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:

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.

Last modified: Thursday, 29-May-2008 14:57:49 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: