Traditionally, PHP has been used to dynamically generate HTML. Now, when valid XHTML is common and browsers can render SVG, you could easily embed SVG graphics into your XHTML, and that graphic could be dynamically generated by PHP.
The following graph shows the number of news posts per hour in digg.com from the last hours. It is a dynamically generated SVG image created by PHP (data is cached for 30 minutes):
<?php
/**
* Render SVG embedded in XHTML using PHP - simple sample
*
* This file is a simple example of how SVG can be emedded into XHTML and
* rendered using PHP. It is provided as is, without any kind of guarantees
* to work or waranties of any kind.
*
* @author Shahar Evron, shahar.evron@gmail.com
*/
date_default_timezone_set('Europe/Berlin');
require_once 'Zend/Feed.php';
require_once 'Zend/Cache.php';
// Set up cache
$frontendOpts = array('lifetime' => 1800, 'automaticSerialization' => true);
$backendOpts = array('cacheDir' => '/tmp');
$cache = Zend_Cache::factory('Core', 'File', $frontendOpts, $backendOpts);
// Read RSS feed from digg.com and put statistics into an array
// Load feed from cache or directly
if (! $pubs = unserialize($cache->load('diggfeed'))) {
$feed = Zend_Feed::import('http://digg.com/rss/index.xml');
$pubs = array();
foreach ($feed as $item) {
/* @var $item Zend_Feed_EntryRss */
$k = date('Y-m-d-H', strtotime($item->pubDate->__toString()));
if (! isset($pubs[$k])) $pubs[$k] = 0;
$pubs[$k]++;
}
$pubs = array_reverse($pubs, true);
$cache->save(serialize($pubs), 'diggfeed');
}
$max = max($pubs);
$min = min($pubs);
$count = 0;
$factor = (200 / $max);
header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="UTF-8" ?>' . "\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
<head>
<title>XHTML with embeded SVG test</title>
<style type="text/css"><![CDATA[
body { font-family: Verdana, sans-serif; font-size: 10pt; }
h1, h2 { margin: 0px 2px; padding: 0px; border-bottom: 1px; }
pre { font-size: 9pt; padding: 2px; border: 1px dashed black; background-color: #f0f0f0; }
.smallprint { font-size: 8pt; padding: 0px 5px; }
text { font-size: 8pt; font-family: Georgia, Verdana, sans-serif; }
]]></style>
</head>
<body>
<h1>Embedding SVG in XHTML</h1>
<div class="smallprint">
Shahar Evron <a href="http://prematureoptimization.org/">http://prematureoptimization.org/</a> 2007-03-25
</div>
<p>Traditionally, PHP has been used to dynamically generate HTML. Now,
when valid XHTML is common and browsers can render SVG, you could
easily embed SVG graphics into your XHTML, and that graphic could be
dynamically generated by PHP.</p>
<p>The following graph shows the number of news posts per hour in
<a href="http://digg.com">digg.com</a> from the last hours. It is a
dynamically generated SVG image created by PHP (data is cached for 30 minutes):</p>
<?php // Some definitions
$xStart = 30;
$yBase = 210;
$totalWidth = count($pubs) * 40 + $xStart + 10;
?>
<svg:svg width="100%" height="280">
<!-- some defs -->
<svg:defs>
<svg:linearGradient id="BarGradient">
<svg:stop offset="0%" stop-color="#F60" />
<svg:stop offset="100%" stop-color="#FF6" />
</svg:linearGradient>
</svg:defs>
<svg:g transform="translate(5, 5)">
<!-- frame -->
<svg:rect x="1px" y="1px" width="<?= $totalWidth ?>px" height="235px" fill="none" stroke="#000" stroke-width="1px" />
<!-- y grid -->
<?php for($i = 0; $i <= $max; $i++): ?>
<svg:g transform="translate(5, <?= $yBase - ($i * (200 / $max)) ?>)">
<svg:path d="M <?= $xStart - 5 ?> 0 L <?= $totalWidth - 10 ?> 0 z" fill="none" stroke="#999" stroke-dasharray="3,3" />
<svg:text align="right" y="5" x="10"><?= $i ?></svg:text>
</svg:g>
<?php endfor; ?>
<!-- x / y axis -->
<svg:path d="M <?= $xStart ?> <?= $yBase ?> L <?= $totalWidth - 10 ?> <?= $yBase ?> z" fill="none" stroke="#000" />
<svg:path d="M <?= $xStart ?> 10 L <?= $xStart ?> <?= $yBase ?> z" fill="none" stroke="#000" />
<!-- bars -->
<?php foreach ($pubs as $time => $v):
$v = round($v * $factor);
?>
<svg:g transform="translate(<?= $xStart + ($count++ * 40)?>, 10)">
<svg:rect x="5px" y="<?= 200 - $v ?>px" width="25px" height="<?= $v ?>px" fill="url(#BarGradient)" stroke="#000000" stroke-width="1px" />
<svg:text x="0px" y="214px" fill="#000000"><?= substr($time, -2) . ":00" ?></svg:text>
</svg:g>
<?php endforeach; ?>
</svg:g>
</svg:svg>
<h2>Source of this page:</h2>
<pre class="source"><?php highlight_file(__FILE__); ?></pre>
</body>
</html>