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.

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

The context menu offers additional options which are specific to the currently selected element or elements, group or groups of elements.

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.

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.

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.

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.

Releasing the Ctrl key restores the previously active tool.

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.

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.

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

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:

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

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.

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.

The SVG Editor supports template-level Custom Properties, which let you pass dynamic parameters into template-based components.

Custom Properties are stored in the SVG XML and behave similarly to Dashboard Custom Properties.

Property name: valveTagPrefix Type: String Used in expression: getVariable(dc(), {valveTagPrefix} + "_angle") This makes it possible to reuse a single SVG template across multiple component instances — each configured differently.

The Default Context defines the context used when evaluating template bindings. This is particularly useful when referencing device variables, such as PLC tags.

It behaves the same way as Default Context in Subdashboard components.

In addition to referencing static SVG files, the SVG File > 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.

The SVG File> 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.

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.

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?

Tell us more

Send

Thank you!