Below are some examples of SVG markup.

A simple piece of text that shows the current value of Machine Temperature.

<text x="10" y="10" fill="black" arditext="{Machine.Temperature|2} Deg C"/>

A text indicator with a coloured background based on a discrete/on-off value that changes colour to indicate status

<rect x="0" y="0" width="100" height="50" fill="red" ardifill="{Machine.Status|@noanim|@colour}"/>
<text x="10" y="10" fill="black" arditext="{Machine.Status|@noanim|@text}"/>

A text indicator with a coloured background that appears based on the machine running too slowly.

<g  ardiopacity="{Machine.Status|@noanim|@map/0=1/0}">
    <rect x="0" y="0" width="100" height="50" fill="red"/>
    <text x="10" y="10" fill="white">Running Too Slowly</text>
</g>

Creates two rectangles - a background solid rectangle that offers a tool-tip, and a foreground rectangle that acts as a bar-graph of the value. It displays Machine Temperature between 0-50 Deg C and is 50 pixels wide and 200 pixels high.

<g>
   <rect class="barchartbg element" x="0" y="0" rx="5" ry="5" width="50" height="200" name="Temperature" units="Deg C" ardivalue="{Machine.Temperarure|2}"/>
   <rect class="barchartfg" x="2" y="2" width="46" height="46" ardiy="[196-{Machine.Temperarure|@scale/0/14/0/196}]" ardiheight="{Machine.Temperature|@scale/0/50/0/196}" ardifill="{Machine.Temperature|@colour}" rx="5" ry="5" />
</g>