SVG Properties

SVG presentation objects can be used for graphical drawing that contain e.g. shapes, text and images. SVG drawings scale with the dashboard size.

Security note: SVG presentation objects can embed JavaScript code into the dashboards, which may cause information security issues, because the embedded code is executed when users open the dashboard. Thus the dashboard designer persons need to be trusted. Viewer users are not able to change dashboards and embed JavaScript code into dashboards.

Defining SVG code

Here is a simple SVG code, 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">
  <rect x="0" y="0" width="1" height="1" />
</svg>

Following definitions are mandatory in the SVG code for QPR MobileDashboard:

Whole 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 contains 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 own coordinate system. Note also that the SVG can contain shapes that are outside the defined viewbox area. Usually it's practical to have the top left x and y coordinates set to zero and set the width and height so that there is a suitable granularity for the drawing.
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". There may also be other namespace definitions if they are needed by SVG elements.

The SVG tag has an optional attribute preserveAspectRatio, which determines how the SVG drawing is scaled when aspect ratios of the SVG's and presentation object's drawing area don't match. It has a default value xMidYMid meet, which is used when the preserveAspectRatio is not defined. The default value means that the aspect ratio is not changed and the SVG is drawn in the middle of the presentation object's area. The value may be none, which means that the aspect ratio is allowed to change freely to fit the SVG to the presentation object's area (usually this is not used when the SVG contains text because the text will then become distorted). More information about preserveAspectRatio attribute: Mozilla MDN.

The SVG tag may also contain width and height attributes but they are overwritten by QPR MobileDashboard so those attributes don't have any effect.

More information about SVG:

SVG tutorial: https://www.w3schools.com/graphics/svg_intro.asp
SVG examples: https://www.w3schools.com/graphics/svg_examples.asp

Actions in the SVG presentation object

The SVG code can contain SVG events (such as clicking shapes), which will trigger QPR MobileDashboard actions. The events are defined in the SVG code as follows:

<tag eventName=<#action name="ActionName">>

Where:

tag can be any tag that can be used in the SVG code, such as svg, g, rect, circle or text.
eventName can be for example click, doubleclick, mouseover, mouseout, mousedown, mouseup, mousemove. List of all available SVG events: 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 so that the context variable values appear in the SVG drawing. To do this, write the context variable reference as {#variablename}. It's also possible to put the whole SVG code into a context variable, and use the context variable reference in the SVG code.

SVG code example: text

This example contains text block which size, color and positioning can be changed easily. If you change the length of the text, you may need to adjust the viewbox length to fit the text to the available screen.

<svg viewBox="0 0 300 20" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="15" fill="#707070" style="font-size: 14px;">QPR MobileDashboard supports SVG graphics!</text>
</svg>

SVG code example: Base64 encoded image

This example contains a bitmap image which data is embedded into the SVG code using base64 encoding. You can set margins for the image with following changes to the image tag: x="1" y="1" width="8" height="8".

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="10" height="10" xlink:href="data:image/png;base64,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">
</svg>

There are online tools available to make the base64 encoding from a bitmap image (e.g. png): https://www.google.com/?#q=base64+encode.

By default SVG preserves it's aspect ratio. If you want the aspect ratio to adjust to the available space add following attribute to the SVG tag: preserveAspectRatio="none".

If you don't want to embed the image data to the SVG code but use an image which is available as a web resource, use the following kind of href in the image tag: xlink:href="https://community.qpr.com/sites/all/themes/custom/qprc_theme/logo.png".

SVG code example: groups with hover effect

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" />
      <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:dashboardIdentifier": {
    "behavior": "FIXED",
    "value": "Identifier1"
   }
  }
 }
]

External SVG editors

Instead of editing SVG code as a text, it's possible use an external graphical editor to create SVG drawings. SVG editors:

Boxy SVG: https://boxy-svg.com/ (free extension for Google Chrome)
Method Draw: http://editor.method.ac/ (free online editor)
Inkscape: https://inkscape.org/en/ (free desktop application for Windows/Mac/Linux)
Adobe Illustrator: http://www.adobe.com/products/illustrator.html (commercial product for Windows/Mac)
Sketch: https://www.sketchapp.com/ (commercial product for Mac)

The SVG code is exported from the external editor and pasted to QPR MobileDashboard. Check that the SVG code contains the viewBox attribute instead of width and height.

Microsoft PowerPoint presentation can converted to SVG using Inkscape: Export the PowerPoint presentation as a PDF and import the PDF to Inkscape where it can be saved as SVG. Template:MDBTutorialAddSVG