SVG Properties

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

SVG code

Here is a simple example SVG shape, which draws a black square:

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>   
    <rect height="1" width="1" y="0" x="0" />
  </g>
</svg>

Following definitions are mandatory in the SVG code that QPR MobileDashboard uses:

• All the SVG code needs to reside inside a single svg tag, i.e. the code must start with <svg ...> and end with </svg>.
• SVG tag must have a viewBox attribute, which has following four numbers separated by spaces: top left x coordinate, top left y coordinate, width, height. Note that SVG's coordinates are not pixels but SVG uses an own coordinates which are scaled to the available drawing area. Note also the SVG can contains shapes that are outside the defined viewbox.
• SVG tag must have following namespace definitions: xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink". It may also include other namespace definitions if they are needed in the SVG.

The SVG tag has an optional attribute preserveAspectRatio, which has a default value xMidYMid meet. The parameter determines how the SVG is scaled when aspect ratios of the SVG's and presentation object's drawing area don't match. The value may be none, which means that the aspect ratio is not preserved (usually this is not used when the SVG contains text because the text will then become distorted). More information about preserveAspectRatio attribute: preserveAspectRatio w3c documentation.

Defining Actions for the SVG

The SVG code can include embedded actions that are triggered by the SVG events, such as clicking the SVG. The actions are embedded by defining them inside the SVG tag as follows:

<svg SVGEventAttributeName=<#action name="ActionName">>

Where:

• SVGEventAttributeName comes from the desired SVG Event
• ActionName is defined in the "Define SVG actions" text field similarly as with Data Grid popup menu actions.

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 SVG Code and SVG Action sections below result in an SVG image with the following properties:

• A circle inside a rectangle is drawn
• The SVG colors are changed when mouse is hovered over the SVG image. The "style" element contains the CSS which defines the rectangle and circle colors to be used when mouse is hovered over the SVG image.
• A bitmap image residing in the URL defined in the "image" context variable value is placed in the center of the circle.
• The SVG contains an embedded action named "gotodashboard" which is activated when the SVG image is clicked causing the dashboard to be changed to the dashboard the id of which is defined in the "targetdashboard" context variable.

SVG Code:

<svg onclick="<#action name="gotodashboard">" viewBox="0 0 205 205" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
    .myHoverGroup:hover rect
    \{
      opacity: 0.5;
      fill: #FFFFFF;
    \}
    .myHoverGroup:hover ellipse
    \{      
      stroke: #00CC00;
    \}
</style>
  <g>   
    <rect height="197" width="197" y="5" x="5" stroke-width="0" fill="#CBCBCB" />
    <rect height="197" width="197" y="0" x="0" stroke-width="0" fill="#CBCBCB" />
    <g class="myHoverGroup" cursor="pointer" transform="translate(0,0)">            
      <rect id="rectangle" height="197" width="197" y="0" x="0" stroke-width="1" stroke="#808080" fill="#FAFAFA" />      
      <ellipse ry="68" rx="68" cy="82" cx="100" stroke-width="5" stroke="#FFCCAA" fill-opacity="1" fill="#FFFFFF" />
      <image xlink:href="{#image}" height="105" width="105" y="28" x="47" />
      <text xml:space="preserve" font-size="8" text-anchor="middle" y="167" x="100" stroke-width="0" fill="#808080">Click and hover demo</text>
      <text xml:space="preserve" font-size="10" text-anchor="middle" y="183" x="100" stroke-width="0" fill="#808080">Click me!</text>
    </g>
  </g>
</svg>

SVG Action:

[
 {
  "name": "gotodashboard",
  "contextChanges": {
   "sys:dashboard": {
    "behavior": "FIXED",
    "value": "{#targetdashboard}"
   }
  }
 }
]