SVG Visualisations

A few years ago I created this solar Equation of Time visualisation using a visual basic macro and DeltaCAD:

That was at a time before SVG was supported by any major browser. Today the situation is quite different and it is time to revisit the creation of Visualisations for the web. Is it possible to create a SVG visualisation that is contructed as part of page creation by a PHP script? After many visits to google, I finally found the keys here:

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.

Stirring stuff! Actually with my bluehost.com control panel adding the mime type and the application type was the work of about 5 minutes.

In addition to adding the mime and application types to my server, I also needed to make sure that the psvg file contained a header() command and that the xml header was printed into the output rather than being plan text:

<?php
header("Content-type: image/svg+xml");
print("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>");
?>

Unfortunately IE and Firefox cross compatibility issues require the use of the non-standard <embed /> element instead of the recommended <object /> element. Here is the cross browser compatible html to include an svg into a web document:

<embed width="600" height="600" src="eotvisualisation.psvg" NAME="Dynamic EOT Visualisation" type="image/svg+xml" />

Having registered .psvg files with the webserver and sorting out the cross browser issues, the results may be seen in a unique visualisation of the speeding up and slowing down of sun based time throughout the year.

Speak Your Mind

*