SVG Properties - Revision history

Ollvihe at 14:52, 15 January 2020

2020-01-15T14:52:23Z

Ollvihe: /* Examples */

2019-12-10T16:53:24Z

Examples

Ollvihe: /* Examples */

2019-12-10T16:50:47Z

Examples

Ollvihe at 16:35, 8 December 2018

2018-12-08T16:35:02Z

Ollvihe: /* Defining SVG Code */

2018-12-08T16:34:20Z

Defining SVG Code

Ollvihe at 16:30, 8 December 2018

2018-12-08T16:30:17Z

Ollvihe: /* Actions in the SVG presentation object */

2018-12-07T15:41:13Z

Actions in the SVG presentation object

TeeHiet: /* Actions in the SVG presentation object */

2018-04-25T10:57:42Z

Actions in the SVG presentation object

TeeHiet: /* Actions in the SVG presentation object */

2018-04-25T10:57:02Z

Actions in the SVG presentation object

TeeHiet: /* Actions in the SVG presentation object */

2018-04-25T10:56:46Z

Actions in the SVG presentation object

← Older revision		Revision as of 14:52, 15 January 2020
Line 44:		Line 44:

	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.
−	~~{{MDBTutorialAddSVG}}~~

	[[Category: QPR UI]]		[[Category: QPR UI]]

@@ Line 32: / Line 32: @@
 * '''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#Data_Grid_Click_and_Popup_Menu_Events|Data Grid click and popup menu events]].
 == SVG Editors ==

@@ Line 34: / Line 34: @@
 == Examples ==
 * [[SVG Text Example]]
 * [[SVG Base64 Encoded Image]]

@@ Line 23: / Line 23: @@
 * SVG examples: https://www.w3schools.com/graphics/svg_examples.asp
-== Actions in SVG Presentation Object ==
+== 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>
@@ Line 39: / Line 39: @@
 * [[SVG Groups With Hover Effect]]
-== External SVG editors ==
+== 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)

@@ Line 10: / Line 10: @@
 </svg>
 </pre>
-Following definitions are mandatory in the SVG code for QPR UI:
+In the SVG used in QPR UI, the following definitions are mandatory:
-* Whole SVG code needs to reside inside a single svg tag, i.e. the code must start with '''<svg ...>''' and end with '''</svg>'''.
+* Whole SVG code needs to reside inside a single SVG element, 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 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 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 tag 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.
+* 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 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: [https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio Mozilla MDN].
+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 UI, so those attributes don't have any effect.

@@ Line 30: / Line 30: @@
 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 '''click''', '''doubleclick''', '''mouseover''', '''mouseout''', '''mousedown''', '''mouseup''', '''mousemove'''. List of all available SVG events: [https://www.w3.org/TR/SVG/interact.html#SVGEvents SVG Event]
+* '''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#Data_Grid_Click_and_Popup_Menu_Events|Data Grid click and popup menu events]].

@@ Line 26: / Line 26: @@
 The SVG code can contain SVG events (such as clicking shapes), which will trigger QPR UI actions. The events are defined in the SVG code as follows:
 <pre>
-<tag eventName=<#action name="ActionName">>
+<tag eventAttributeName=<#action name="ActionName">>
 </pre>
 Where: