SVG Dashboard

luca 22/01/2012 14


As you learned before, SVG file is a text file in XML format: we can change it easily using PHP SimpleXML library.

Our PHP code will:

  • receive as a parameter (GET, using a URL like ?parameter=value) the actual value to be shown;
  • load the SVG template;
  • change the rectangle’s height property and text value;
  • change their color depending on the value (blue if less than 15, red if more than 25 otherwise green);
  • send the resulting SVG to user’s browser.

Get actual value from the associative array  $_GET:

$value = $_GET["value"];

Load the template file from the same folder of our PHP script: you can get folder’s real path from the __DIR__ constant:

$root = __DIR__;
$svg_template = simplexml_load_file("$root/template.svg");

Get XML nodes with an XPath query which looks for the ids we previously set in Inkscape:

$result = $svg_template->xpath("//*[@id='temp_level']");
if(count($result) == 1) $temp_level = $result[0];
else exit("Unable to find a node with temp_level ID");
$result = $svg_template->xpath("//*[@id='temp_value']");
if(count($result) == 1) $temp_value = $result[0];
else exit("Unable to find a node with temp_value ID");

$result = $svg_template->xpath("//*[@id=’temp_value’]");
if(count($result) == 1) $temp_value = $result[0];
else exit("Unable to find a node with temp_value ID");

Change the rectangle’s height and text value (as you remember we need to multiply value with 5 to have the connect height because of in our drawing each degree corresponds to 5 units):

$temp_level['height'] = $value * 5;
$temp_value[0] = $value;

Change style property to change the color (blue = #0000ff…):

if($value < 15) {
  $temp_value['style'] = "font-size:72px;fill:#0000ff";
} elseif($value < 25) {
  $temp_value['style'] = "font-size:72px;fill:#00ff00";
} else {
  $temp_value['style'] = "font-size:72px;fill:#ff0000";

At last notificate to the browser the correct MIME Type and send the changed XML:

header("Content-type: image/svg+xml");
echo $svg_template->asXML();

In the next page we’re going to learn how to receive data from Pachube using PHP…

Pages: 1 2 3 4


  1. Lucio 30/06/2012 at 16:51 - Reply

    Gentile Luca Dentella,
    ho trovato interessantissimo il suo tutorial che riguarda il dashboard svg. Le chiederei gentilmente, se possibile, di fornirmi un esempio per visualizzare in forma grafica sul browser i valore di tensione letti sugli ingressi analogici dell’arduino uno in forma vu meter lineare (tipo il suo termometro) oppure classico a lancetta.
    Ringraziando anticipatamente, Le porgo distinti saluti.

  2. A MacLeod 06/05/2013 at 22:24 - Reply

    Thanks for taking the time to document this, I used it as a basis for my own arduino project (a web-connected heating oil level monitor.)

    Getting a nice SVG-based level indication turned out to be easier than I had feared… strangely, getting it to send warning emails was trickier!

    • luca 07/05/2013 at 08:19 - Reply

      Hi! Thanks for your feedback and great SVG web interface!

  3. Mosesliete 16/04/2018 at 23:05 - Reply

    Wonderful site, how do u get all this information?I’ve read a few posts on your site and I like your writing style. Thanks a million, keep up the great work.

Leave A Response »

This website uses cookies to ensure you get the best experience on our website maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.