Difference between revisions of "SVG Properties"
Jump to navigation
Jump to search
| (29 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
SVG presentation objects can be used for graphical drawing that contain e.g. shapes, text and images. SVG drawings scale with the dashboard size. | SVG presentation objects can be used for graphical drawing that contain e.g. shapes, text and images. SVG drawings scale with the dashboard size. | ||
| − | == Defining SVG | + | Security note: SVG presentation objects can embed [https://www.w3schools.com/js/default.asp 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: | Here is a simple SVG code, which draws a black square: | ||
<pre> | <pre> | ||
| Line 8: | Line 10: | ||
</svg> | </svg> | ||
</pre> | </pre> | ||
| − | + | In the SVG used in QPR UI, the following definitions are mandatory: | |
| − | * Whole SVG code needs to reside inside a single | + | * Whole SVG code needs to reside inside a single SVG element, i.e. the code must start with '''<svg ...>''' and end with '''</svg>'''. |
| − | * SVG | + | * SVG element 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 an 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 | + | * SVG element must have following namespace definitions: '''<nowiki>xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"</nowiki>'''. 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 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 of '''xMidYMid meet''', which is used when the preserveAspectRatio is not defined. When the default value is used, 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: [https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio Mozilla MDN]. |
| − | The SVG tag may also contain '''width''' and '''height''' attributes but they are overwritten by QPR | + | The SVG tag may also contain '''width''' and '''height''' attributes but they are overwritten by QPR UI, so those attributes don't have any effect. |
More information about SVG: | More information about SVG: | ||
| Line 21: | Line 23: | ||
* SVG examples: https://www.w3schools.com/graphics/svg_examples.asp | * SVG examples: https://www.w3schools.com/graphics/svg_examples.asp | ||
| − | == Actions | + | == SVG Actions == |
| − | + | In the SVG code it's possible to use html events and bind them to QPR UI actions. The events are for example mouse click and mouse hover, and actions can be used for example to change context variable values. The events are defined in the SVG code using '''action''' tags as follows: | |
<pre> | <pre> | ||
| − | <tag | + | <tag eventAttributeName=<#action name="ActionName">> |
</pre> | </pre> | ||
Where: | Where: | ||
* '''tag''' can be any tag that can be used in the SVG code, such as '''svg''', '''g''', '''rect''', '''circle''' or '''text'''. | * '''tag''' can be any tag that can be used in the SVG code, such as '''svg''', '''g''', '''rect''', '''circle''' or '''text'''. | ||
| − | * ''' | + | * '''eventAttributeName''' can be for example '''onclick''', '''ondoubleclick''', '''onmouseover''', '''onmouseout''', '''onmousedown''', '''onmouseup''', '''onmousemove'''. List of all available SVG events: [https://www.w3.org/TR/SVG/interact.html#SVGEvents SVG Event] |
| − | * '''ActionName''' is defined in the "Define SVG actions" text field similarly as with [[Data_Grid_Properties# | + | * '''ActionName''' is defined in the "Define SVG actions" text field similarly as with [[Data_Grid_Properties#Data_Grid_Click_and_Popup_Menu_Events|Data Grid click and popup menu events]]. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | == | + | == SVG Editors == |
Instead of editing SVG code as a text, it's possible use an external graphical editor to create SVG drawings. 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) | * '''Boxy SVG''': https://boxy-svg.com/ (free extension for Google Chrome) | ||
| Line 97: | Line 41: | ||
* '''Sketch''': https://www.sketchapp.com/ (commercial product for Mac) | * '''Sketch''': https://www.sketchapp.com/ (commercial product for Mac) | ||
| − | The SVG code is exported from the external editor and pasted to QPR | + | The SVG code is exported from the external editor and pasted to QPR UI. 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. | 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. | ||
| − | |||
| − | [[Category: QPR | + | [[Category: QPR UI]] |
Latest revision as of 14:52, 15 January 2020
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>
In the SVG used in QPR UI, the following definitions are mandatory:
- Whole SVG code needs to reside inside a single SVG element, i.e. the code must start with <svg ...> and end with </svg>.
- SVG element 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 an 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 element 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 of xMidYMid meet, which is used when the preserveAspectRatio is not defined. When the default value is used, 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 UI, 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
SVG Actions
In the SVG code it's possible to use html events and bind them to QPR UI actions. The events are for example mouse click and mouse hover, and actions can be used for example to change context variable values. The events are defined in the SVG code using action tags as follows:
<tag eventAttributeName=<#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.
- eventAttributeName can be for example onclick, ondoubleclick, onmouseover, onmouseout, onmousedown, onmouseup, onmousemove. List of all available SVG events: SVG Event
- ActionName is defined in the "Define SVG actions" text field similarly as with Data Grid click and popup menu events.
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 UI. 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.