====Marking Up SVGs====

While the previous section has you building an SVG file from code, in some cases you'd like to take an **existing** SVG document and make it 'live' - creating diagrams that respond to data.

We provide the Live SVG library to help with these scenarios.

Create an SVG file called **report.svg** and place it in your infographic folder, along with **svgmarkup.js**.

===Animating the SVG===

In your SVG file, find any object you would like to modify in response to live data. For example, a **text** object you'd like to show the current machine temperature.

In the XML of the text object, add an attribute named 'ardi' followed by the name of the value you want to change. In this case, we want to change the 'text' of the element, so we use 'arditext'. You could also use 'ardifill', 'ardistroke', 'ardiopacity', 'arditransform' etc.

The attributes value should be the value you'd like to write to the base attribute (ie. the text, transform, opacity). You can add an ARDI property name in curly braces, and the value of the ARDI property will be substituted.

For example...

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

Note that this is assumed to be a **string** substitution. This allows you to do the same thing with transforms, such as...

<code>
<rect x="0" y="0" width="50" height="50" arditransform="translate({Machine.Temperature} 0)"/>
</code>

If you'd like to add computation, use square brackets around the whole expression. If the temperature was 20.5 degrees C, A value **{Machine Temperature} * 2** will result in a string value of '20.5 * 2'. A value **[{Machine Temperature} * 2]** will result in a value of 41.

<code>
<rect x="0" y="0" width="50" height="[{Machine.Temperature} * 50]" arditransform="translate({Machine.Temperature} 0)"/>
</code>

You can also add //modifiers// to attributes to tweak them.

Modifiers are added with the '|' symbol. A simple number after the bar will //round// the resulting value to that many decimal places. {Machine.Temperature|2} will limit it to two decimal places.

The '@colour' modifier will get the appropriate ARDI colour for the value.

<code>
<rect x="10" y="10" width="200" height="50" fill="white" ardifill="{Machine.Running|@colour}"/>
</code>

The '@text' modifier will get the appropriate ARDI text for a discrete value (such as a machine or valve status.

<code>
<rect x="10" y="10" width="200" height="50" fill="white" ardifill="{Machine.Running|@colour}"/>
<text x="10" y="10" width="200" height="50" fill="white" arditext="{Machine.Running|@text}"/>
</code>

See the section of [[modifiers|modifiers]] for more details.

.See how to [[set up your marked-up display|set up your marked-up display]].