SVG Editor
The Vector Drawing component includes a number of tools for editing an uploaded SVG image, or creating new images starting from a blank canvas.
Toolbar
The toolbar appears when the component property editor for the Vector Drawing component is selected. Tools and actions for creating, editing, and aligning elements of an SVG image are available .
Icon | Name | Details |
|---|---|---|
 | Selector | Select an element of the image. If the element is part of a group, the group will be selected instead. Holding the Click and drag a selected image to change its position. Holding the The element can be scaled and rotated by using the tool to drag points on the selection box surrounding the element. Holding the When an element or group is selected, a property editor for the selected element opens. |
 | Direct Selector | Select an individual element, even if it’s a member of a group, and display the anchor points and any control points of the element. The element can be edited by manipulating the individual anchor points and control points with the tool. |
 | Pencil | Draw paths consisting of automatically generated anchor points. |
 | Rectangle | Draw rectangles. |
 | Ellipse | Draw ellipses |
 | Pen | Draw polygon paths. Each click of the tool adds an anchor point. Press and hold the
|
 | Text | Add a text box. |
 | Line | Click and drag to create a line with two anchor points. |
 | Flip Vertical | Mirrors the selected element or elements vertically. |
 | Flip Horizontal | Mirrors the selected element or elements horizontally. |
 | Remove | Remove the selected element or group of elements. |
 | Left Align | Align the left-most edges of all selected elements and groups. |
 | Right Align | Align the right-most edges of all selected elements and groups. |
 | Align Vertical Axes | Align the central vertical axes of all selected elements and groups. |
 | Top Align | Align the top-most edges of all selected elements and groups. |
 | Bottom Align | Align the bottom-most edges of all selected elements and groups. |
 | Align Horizontal Axes | Align the central horizontal axes of all selected elements and groups. |
Context Menu
The context menu offers additional options which are specific to the currently selected element or elements, group or groups of elements.
Menu Option Name | Description |
|---|---|
Add Image | Gives an option to upload an image to the Image Data field of the SVG File property of the component. |
Clear All | Deletes all elements of the SVG file. |
Select All | Selects all elements of the SVG file. |
Edit Properties | Opens a properties editor for the chosen element. |
Copy | Loads the chosen element into the clipboard. |
Cut | Loads the chosen element into the clipboard, and deletes the element from the SVG file. |
Paste | Creates an element in the canvas from clipboard data. |
Remove | Deletes the indicated element. |
Group | Creates a single group out of the selected elements. |
Ungroup | If a group is selected, its member elements are removed from the group. |
Move Front | Moves the indicated element one level higher in the element list. |
Move Back | Moves the indicated element one level lower in the element list. |
Convert to Path | If the chosen element is not already a path, it is converted to an SVG path-type element. |
SVG Elements | Displays a list of elements that are directly under the cursor, allowing hidden elements to be selected. |
Referencing Element Property Values
References to element properties are determined by the name of the element, and the name of the property, separated by an underscore (_) character
For example, suppose a vector drawing component named vectorDrawing0 contains an element named rect0, and the reference should point to the Fill Color element property, which is named fill. In order to target this property value, the following reference is used:
form/vectorDrawing0:rect0_fillTo reiterate, this reference consists of the following parts:
form/is the schema indicating a dashboard component.vectorDrawing0, as stated above, is the name of the dashboard component.rect0_fillindicates the name of the element, and the name of the property, separated by an underscore.
Editor Hotkeys
The following hotkeys can be used when one or more elements are selected.
Key Combination | Action |
|---|---|
| Group selected elements. |
| Ungroup selected elements. |
| Copy selected elements. |
| Cut selected elements. |
| Paste elements from clipboard. |
| Duplicate selected elements. |
| Move selected elements back. |
| Bring selected elements forward. |
| Remove selected elements. |
Was this page helpful?