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

Selects an image element. If the element belongs to a group, the group will be selected. Hold Shift while clicking to add elements or groups to the selection.
Drag a selected element to move it. Hold Shift to constrain movement horizontally or vertically.
Resize or rotate an element by dragging points on its selection box. Hold Shift while resizing to keep aspect ratio.
When an element or group is selected, its properties open in the property editor.
Note: If the selected element belongs to a group, bindings or property changes apply to the entire group. This is expected behavior and differs from Direct Selector

Direct Selector

Selects an individual element even if it belongs to a group. Displays anchor and control points for editing. Edit the element by adjusting its anchor and control points. Direct Selector always applies to the chosen element only, ensuring bindings and property changes affect that element, not the group.

Note — Add/Remove anchors: Hold Alt while the Direct Selector is active:

  • Alt + click on a segment — insert an anchor point at the nearest position.

  • Alt + click on an existing anchor — remove that anchor point.
    Release Alt to exit this mode.

Pencil

Draws freehand paths with automatically generated anchor points

Rectangle

Draws rectangles

Ellipse

Draws ellipses

Pen

Draw polygon paths. Each click adds an anchor point.

  • Continue an existing polyline: Move the cursor near either endpoint of an open path until the “continue” cursor appears. Click to keep drawing from that end. The original element’s ID is preserved.

  • Close a path: While drawing, click near the starting point to close the path.

  • Add/Remove anchors (quick mode): Hold Alt to temporarily enter the add/remove mode:

    • Alt + click on a segment — insert an anchor point at the nearest position on that segment.

    • Alt + click on an existing anchor — remove that anchor point.

    • Release Alt to return to normal Pen behavior.

Text

Adds a text box

Line

Draws straight lines with two anchor points

Flip Vertical

Flips the selected element(s) vertically

Flip Horizontal

Flips the selected element(s) horizontally

Remove

Deletes the selected element or group

Left Align

Aligns the left edges of all selected elements and groups

Right Align

Aligns the right edges of all selected elements and groups

Align Vertical Axes

Aligns the vertical center lines of all selected elements and groups

Top Align

Aligns the top edges of all selected elements and groups

Bottom Align

Aligns the bottom edges of all selected elements and groups

Align Horizontal Axes

Aligns the horizontal center lines of all selected elements and groups

Distribute Center Horizontally

Distribute the selected elements and groups evenly along the horizontal axis based on their center points

Distribute Left

Distribute the selected elements and groups evenly along the horizontal axis based on their left edges

Distribute Right

Distribute the selected elements and groups evenly along the horizontal axis based on their right edges

Distribute Bottom

Distribute the selected elements and groups evenly along the vertical axis based on their bottom edges

Distribute Center Vertically

Distribute the selected elements and groups evenly along the vertical axis based on their center points

Distribute Top

Distribute the selected elements and groups evenly along the vertical axis based on their top edges

Alignment and Distribution Buttons Behavior

Alignment and distribution buttons are context-sensitive. Their behavior depends on the current selection and whether the Vector Drawing is standalone or nested inside an Absolute layout or another Vector Drawing.

Standalone Vector Drawing

Selection Context

Alignment Buttons Behavior

Distribution Buttons Behavior

Empty canvas

Visible, disabled

—

Nothing selected

Aligns all elements relative to the canvas bounds

—

One element or group selected

Aligns the element or group relative to the canvas bounds

—

Two or more elements or groups selected

Aligns selected elements and groups relative to each other

Available

Nested Vector Drawing

Placed inside an Absolute layout or another Vector Drawing.

Selection Context

Alignment Buttons Behavior

Distribution Buttons Behavior

Vector Drawing container selected

Aligns the Vector Drawing container relative to its parent

—

Canvas has elements, nothing selected inside

Opens the alignment menu

—

One element or group selected inside the canvas

Aligns the element or group relative to the nested canvas bounds

—

Two or more elements or groups selected inside the canvas

Aligns selected elements and groups relative to each other

Available

Nested Vector Drawing and other parent-level components selected

Aligns all selected parent-level components relative to each other

Available when two or more parent-level components are selected

Alignment Menu in Nested Layouts

When a nested Vector Drawing has elements on its canvas but none are selected, clicking an alignment button opens a menu. Each button has two variants: one that aligns the container relative to its parent Absolute layout, and one that aligns the canvas content relative to the canvas bounds. This menu is only available when the Vector Drawing is not in full-screen mode.

Icon

Name

Details

 

Align Component Left;

Align Content Left

Align Component Left — aligns the left edge of the Vector Drawing with the left edge of its parent.

Align Content Left — aligns the canvas content with the left edge of the canvas bounds.

 

Align Component Horizontal Center;

Align Content Horizontal Center

Align Component Horizontal Center — centers the Vector Drawing horizontally within its parent.

Align Content Horizontal Center — centers the canvas content horizontally within the canvas bounds.

 

Align Component Right;

Align Content Right

Align Component Right — aligns the right edge of the Vector Drawing with the right edge of its parent.

Align Content Right — aligns the canvas content with the right edge of the canvas bounds.

 

Align Component Top;

Align Content Top

Align Component Top — aligns the top edge of the Vector Drawing with the top edge of its parent.

Align Content Top — aligns the canvas content with the top edge of the canvas bounds.

Align Component Vertical Center;

Align Content Vertical Center

Align Component Vertical Center — centers the Vector Drawing vertically within its parent.

Align Content Vertical Center — centers the canvas content vertically within the canvas bounds.

 

Align Component Bottom;

Align Content Bottom

Align Component Bottom — aligns the bottom edge of the Vector Drawing with the bottom edge of its parent.

Align Content Bottom — aligns the canvas content with the bottom edge of the canvas bounds.

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 Template Data field of the SVG Template property of the component.

Clear All

Deletes all elements of the SVG template.

Select All

Selects all elements of the SVG template.

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 template.

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.

Bring to Front

Makes the element the topmost in the hierarchy.

Move to Back

Makes the element the bottommost in the hierarchy.

Move Forward

Moves the element one level higher in the element list.

Move Backward

Moves the 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.

Bindings rely on the internal structure and IDs of the SVG elements. If the SVG template content is cleared or replaced, existing bindings may stop working. After replacing an SVG template, you must verify and potentially recreate the necessary bindings.

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_fill

To 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_fill indicates 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.

Currently, these hotkeys only apply to native SVG elements. They do not affect dashboard components nested within the Vector Drawing container.

Key Combination

Action

Ctrl+G

Group selected elements.

Ctrl+Shift+G

Ungroup selected elements.

Ctrl+C

Copy selected elements.

Ctrl+X

Cut selected elements.

Ctrl+V

Paste elements from clipboard.

Ctrl+D

Duplicate selected elements.

Ctrl+[

Move selected elements back.

Ctrl+]

Bring selected elements forward.

Delete

Remove selected elements.

Alt + Click on polyline segment

Add a new node to the polyline path

Alt + Click on existing node

Remove the selected node from the polyline

Alt + hover over the end of an open polyline, click

Continue drawing from the end of the path (the element ID is preserved)

Alt + hover over the starting point, click

Close the path

Editor Hotkeys — Extended Interactions

Tool / Action

Hotkey Combination

Result

Selector — selection/drag

Shift

Move only along X/Y axis and 45° diagonals

Alt

Copy dragged element

Alt + Shift

Copy dragged element along X/Y axis and 45° diagonals

Selector — resize/transform

Shift

Keep aspect ratio while resizing

Alt

Resize symmetrically in both directions

Alt + Shift

Resize symmetrically with aspect ratio preserved

Selector — rotation

Shift

Rotate in 15° steps

Alt

Copy rotated element

Alt + Shift

Copy rotated element in 15° steps

Direct Selector — shape

—

Same as Selector tool

Direct Selector — path

Shift

Move node along X/Y axis and 45° diagonals

Alt

Temporarily switch to Pen tool (Add/Remove Node)

Pencil tool

Shift

Draw straight line along X/Y axis and 45° diagonals

Pen tool — editing path

Alt

Add/Remove node on existing path

Pen tool — drawing

Shift

Draw straight line along X/Y axis and 45° diagonals

Alt

Create Bezier curve segment

Line tool

Shift

Create line along X/Y axis and 45° diagonals

Alt

Create line in both directions from click point

Alt + Shift

Same as above, constrained to X/Y axis and 45° diagonals

Rectangle tool

Shift

Create square

Alt

Create rectangle from center point

Alt + Shift

Create square from center point

Ellipse tool

Shift

Create circle

Alt

Create ellipse from center point

Alt + Shift

Create circle from center point

Text tool

—

No modifiers supported

Any tool

Ctrl (hold)

Switch to Direct Selector until released

Switching Between Drawing and Selection Tools

The Vector Drawing Editor supports temporary switching between tools using the Ctrl key. This feature allows users to edit existing elements without manually changing the active tool.

Default Behavior

When a Drawing tool (e.g., Rectangle, Pen, Ellipse) is active:

  • Clicking on the canvas creates new shapes.

  • Existing shapes cannot be selected or moved.

  • This prevents accidental modification while in drawing mode.

Using Ctrl to Temporarily Switch Tools

Active Tool

While Holding Ctrl → Switches To

Purpose

Rectangle, Pen, Ellipse

Selector

Select and move existing elements

Selector

Direct Selector

Edit shape control points

Direct Selector

Selector

Return to standard selection mode

Releasing the Ctrl key restores the previously active tool.

Example Workflow

  1. Activate the Rectangle tool.

  2. Hold Ctrl to temporarily switch to Selector.

  3. Select and move an existing shape.

  4. Release Ctrl to continue drawing.

  • Cursor changes dynamically to reflect the active temporary tool.

  • Applies to all supported shape tools in the editor.

  • This feature improves workflow efficiency without requiring tool switching.

Using SVG Editor as a Container

The Vector Drawing component is a container, similar to a panel. This allows you to nest components directly inside the Vector Drawing canvas and use it as a container in dashboards.

Key features:

  • The Vector Drawing behaves like a container-type component: all nested elements (labels, charts, input fields, etc.) are positioned within its bounds.

  • Nested components follow the same positioning and layout logic of the Absolute layout.

  • You can place other Vector Drawing components inside a parent Vector Drawing — they will behave as part of the parent container.

Template Bindings and Custom Properties in SVG Editor

The SVG Editor component supports template-level bindings and custom properties, enabling reusable, dynamic SVG templates in dashboards.

SVG Template Bindings

You can define bindings directly within the SVG Properties table. These behave like standard dashboard bindings but are embedded in the SVG template and automatically compiled at runtime.

Each record in the SVG Properties table may now include the following fields:

Field

Description

Binding

Enables binding for the property

Expression

JavaScript-style expression evaluated to get the property value

Activator

Event reference that triggers the expression (e.g. mouseClicked@)

On Startup

If checked, expression is evaluated on component load

On Event

If checked, expression is evaluated when the activator fires

Condition

Optional condition that must be met for the expression to run

Periodic

Enables periodic re-evaluation of the expression

Period

Interval (in ms) for periodic evaluation

As the dashboard loads a Vector Drawing component with template bindings, the system generates standard bindings from the template’s definitions.

Target: form/vectorDrawing1:ellipse2_stroke
Expression: color(255,0,0)
Activator: form/vectorDrawing1:mouseClicked@​

Clicking the component dynamically changes the stroke color of the ellipse through the resulting binding.

Dashboard Bindings
Dashboard bindings are standard component bindings at the dashboard level (i.e., the usual bindings that connect component properties to other dashboard objects/events).

To make editing predictable, the binding editor distinguishes between these two groups. The binding UI uses a dedicated binding type selector for Vector Drawing where applicable (Template vs Dashboard).

Editing Bindings in the Properties Editor

When you open bindings for a Vector Drawing property in the UI Builder / Properties Editor, the binding popup provides separate views for template and dashboard bindings. The UI presents them as two tabs:

  • Template Binding

  • Dashboard Bindings

This separation is intentional: it helps you avoid mixing SVG-template-level bindings (per SVG property) with regular dashboard bindings.

Important Restriction for Template-referenced Vector Drawings

If a Vector Drawing is configured to refer to a template (i.e., it is not the “owner” of the editable template but is instead pointing to it), the UI does not allow adding or editing bindings for that Vector Drawing’s SVG properties. In this mode, the binding icon and binding actions are disabled to prevent users from creating bindings that would be inconsistent with the referenced template ownership model.

This restriction ensures that:

  • SVG template bindings remain attached to the template-owning component (or the correct template source),

  • cloned or template-referencing components do not silently diverge from the shared template behavior.

Using SVG Template Expressions

In addition to referencing static SVG templates, the SVG Template > Type property supports the Expression source type.
This lets you define a dynamic expression that returns either a String (template name) or a Data Block with SVG content.

getVariable("templatesContext", "valveSvgTemplate")

This approach allows you to reuse template logic dynamically across multiple Vector Drawing components.

Linking to an SVG Component

The SVG Template > Type property also supports a new option: Link to SVG Component.

When you select this option, an Entity Selector becomes available. It allows you to choose an existing SVG component from the Context Tree.

The Vector Drawing component becomes an instance of the selected SVG. It inherits all agg:params, template bindings, and structural definitions from the original.

This provides a clean and scalable way to reuse complex SVG templates across the dashboard—without duplicating bindings or properties manually.

Reference Resolution and Cloning Behavior

When you clone a Vector Drawing component that uses a template, the system automatically updates all internal references in bindings — such as Expression, Condition, and Activator.

Cloning a component updates references like:

Original reference: form/vectorDrawing1:barrel1:color
Cloned reference: form/vectorDrawing2:barrel1:color

This eliminates manual renaming and ensures correct binding behavior per instance.

Legacy bindings created before this feature still work but they aren’t visible in the SVG Properties panel. Only template-based bindings support inline editing and linking.

Cloning Behavior for Data Block Templates

When a Vector Drawing whose SVG Template → Type is set to Data Block is cloned (by any method), the system changes the clone’s template source to avoid duplicating the embedded SVG data.

Specifically:

  • the clone’s SVG Template → Type is automatically changed to Expression,

  • Template Expression is automatically set to an expression that references the original component’s template within the same dashboard (for example, an expression that points to the original image/template variable, such as {originalSvg:svgFile$imageData} or an equivalent reference supported in your environment).

This behavior prevents multiple identical embedded templates from appearing in the dashboard after cloning and makes template reuse explicit and maintainable.

Was this page helpful?