SVG Dashboard

luca 22/01/2012 14

SVG template

The first step to create our dinamic dashboard is to draw a template in SVG. Although there are several drawing programs which can manage that format, I recommend Inkscape, which is opensource and a portable version is available too.

It’s very important to draw using the grid (menu View – Grid):

First, let’s draw the “static” part of our dashboard: in my example the dashboard will be composed by a thermometer and a text information about actual temperature. If you can’t use Inkscape, on Internet you can find very good tutorials (es. 1 and 2) about it.

While drawing the thermometer, it’s important to find out the number of units which correspond to one degree (in my example 1 degree = 5 units):

Add to the drawing the elements which change while temperature changes: a rectangle for the liquid in the thermometer and the text. It’s not important at the moment the value you choose:

Open XML editor (menu Edit – XML Editor…):

If you select an element, you can show its properties in the XML source.
Choose the rectangle and try to change height property (after having changed it, confirm with CTRL+ENTER):

If rectangle grew in the wrong direction (to the bottom), use Object – Flip Vertical to rotate it 180°:

Change id property to give a more friendly name to the object (for example temp_level):

Choose the text and change id property too (for example temp_value):

At last, resize the “page” of our drawing: File menu – Document properties…, open Resize page to content… and click Resize page to drawing or selection. If you want, you can add some margin around the drawing:

In the next page we’re going to learn how to make our SVG file dynamic 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.