SVG Properties

An SVG presentation object can be used to draw svg images that scale with the panel size.

SVG Tag Parameters

All the SVG code needs to reside inside a single svg tag. The SVG needs to have the following parameters:

• viewBox: used for resizing to work. See viewBox w3c documentation
• xmlns: used by some browsers to show content properly.
• xmlns:svg: used by some browsers to show content properly.

In addition, the preserveAspectRatio parameter can be used to fine-tune the appearance. See preserveAspectRatio w3c documentation

Context Variables in SVG Code

It's possible to use context variables in the SVG code definition. To do this, write the context variable reference as "{#variablename}" (without the quotes). It's even possible to put the whole SVG code into a context variable, and just use the context variable reference in the SVG code.

Example

The following example draws a simple circle. It uses the "color" context variable for setting the color of the circle. If there is no value for the context variable, the circle will be black by default. In addition, the SVG presentation object will display as text what is defined as the value for the "texthere" context variable.

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <circle fill="{#color}" cx="100" cy="100" r="100"/>
<text x="85" y="100" fill="white">{#texthere}</text>
</svg>