Functional explanation
SVGObject embeds inline SVG content. It is the preferred object for custom vector icons and symbol graphics that must remain sharp at different sizes.
The object is useful for custom symbols, status graphics, and vector artwork that needs dynamic colors. Because the SVG is stored inline, it can be controlled directly by the page design and remains available offline.
Use SVGObject when the graphic must scale cleanly or needs dynamic fill and stroke styling.
SVG Editor
The SVG Editor is a full-screen editor for preparing and lightly editing SVG symbols before they are used on a page. It opens in three ways: from the Upload SVG button, by right-clicking a symbol in the Library, and from the Open in SVG Editor button in the SVG decorator of a selected SVG on the page.
The editor shows the symbol on a preview canvas together with a set of readiness checks. The preview switches between Edited and Original, and can be shown against a Checker background or against the HMI dark and HMI light themes, so a symbol can be judged against the background it will be used on.
Opening a symbol leaves its appearance exactly as it is. Colors written into the drawing keep their value until a paint slot is set to Runtime. Prep for library resolves the readiness checks in one step: it adds a viewBox when missing, removes fixed width and height, sets every paint slot to Runtime so the object Color States drive the whole symbol, and strips editor metadata.
Paint slots lists every distinct fill and stroke found in the drawing, one row per color. Each slot is set to either Runtime or Static, which decides whether the object Color States are allowed to repaint it. This is how a symbol can animate its body while keeping its outline black. A slot set to Static keeps its own color, chosen with the color picker on that row, and Runtime base color sets the color a runtime slot falls back to when no state applies.
| Paint slot mode | Effect at runtime | Use for |
|---|---|---|
| Runtime | The slot follows the Color States configured on the object, and falls back to Runtime base color when no state applies. | The part of the symbol that shows the process value, such as a pump body or a valve seat. |
| Static | The slot keeps the color set on its row and stays as drawn. | Outlines, shadows, text and any detail that must stay readable in every state. |
No rows match the filter.
A symbol taken from the 1 P&ID library keeps its drawn detail, so set only the slots that must animate to Runtime and leave the rest Static. A symbol taken from the 1 P&ID v2 library is drawn as an outline for exactly this purpose and is intended to be fully recolored at runtime, so Prep for library suits it well.
Slight edits cover the base fill, stroke color and width, flip and rotate, and canvas actions to fit the viewBox to the content, pad it to a square, or reset the width and height to the viewBox. Element editing lets you select an individual shape to move, resize, duplicate, delete, reorder, or reset, and Flatten groups collapses nested transform groups into a single coordinate space.
When the editor is opened from the Upload SVG button or from the Library, the finished symbol can be placed with Place on page or stored with Add to My Library. When the editor is opened from a symbol already on the page, Apply to object writes the edits back to that same object. Add to My Library is available to Administrators and lets you choose a destination folder, optionally create a subfolder, and set the file name.
| Action | Description | Availability |
|---|---|---|
| Prep for library | Runs all readiness fixes: adds a viewBox, removes fixed size, sets every paint slot to Runtime, and strips editor metadata. | All modes |
| Fit viewBox to content | Recomputes the viewBox to the bounding box of all shapes so nothing is clipped. | All modes |
| Pad viewBox to square | Expands the viewBox to a 1:1 ratio, centered on the content. | All modes |
| Reset width/height to viewBox | Sets the root width and height back to the viewBox dimensions. | All modes |
| Edit elements | Enables selecting a shape to move, resize, duplicate, delete, reorder, or reset. | All modes |
| Flatten groups | Collapses nested transform groups so shapes share one coordinate space. | All modes |
| Place on page | Places the prepared symbol on the current page as a new SVG. | Upload and Library |
| Add to My Library | Saves the prepared symbol as an .svg file in a chosen My Library folder. | Administrators |
| Apply to object | Writes the edits back to the SVG that was opened from the page. | From the page |
No rows match the filter.
Object name
Set the object name shown in the SVG decorator context.
| Setting | Description | Example | Units |
|---|---|---|---|
| Object Name | Name used to identify the SVG object. | PumpSymbol | Text |
No rows match the filter.
Settings
Configure the SVG content, stroke styling, and click behavior.
| Setting | Description | Example | Units |
|---|---|---|---|
| Set Background | Marks the object as a background element, so it sits behind the other objects on the page. | false | Boolean |
| SVG Content | Embedded inline SVG markup. | <svg>...</svg> | SVG |
| Stroke Width | SVG stroke width. | 2 | px |
| Stroke Color | SVG stroke color. | #212529 | Color |
No rows match the filter.
Color
Configure the color and the conditional color states for the SVG object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Color | Color applied to the SVG. Set from the Color picker in the Color group. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | #0d6efd | Color |
| Color States | Conditional color state rules that restyle the SVG from a variable or expression. Each rule pairs a condition with a color, and the first matching rule wins. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | [{"state":"alarm","color":"#dc3545"}] | JSON array |
No rows match the filter.
Position / Size
Configure the position and size of the SVG object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Top | Top position of the object. | 100 | px |
| Left | Left position of the object. | 220 | px |
| Width | Width of the object. | 80 | px |
| Height | Height of the object. | 80 | px |
| Z-index | Layer order of the object. Higher values appear in front of lower values. | 10 | Number |
No rows match the filter.
Actions
Configure the action list executed when the SVG is clicked. See the Actions article for every available action type and its settings.
| Setting | Description | Example | Units |
No rows match the filter.
Animate Position / Size
Configure the runtime animation settings for height, width, top, and left of the SVG object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Animate Height Variable | Variable or expression that drives runtime height animation. | PLC1.Level | Variable or expression |
| Animate Height Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Height Maximum Raw | End of the raw value span. The animated height reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Height Minimum px | Start of the pixel span. The animated height runs from 0 px up to the difference between Maximum px and Minimum px. | 20 | px |
| Animate Height Maximum px | End of the pixel span. With Minimum px at 0, this is the height at full scale. | 60 | px |
| Animate Height Reverse | Sets the edge the height grows from. Cleared grows the object upwards from the bottom edge, which suits level and fill graphics. Selected grows it downwards from the top edge. | false | Boolean |
| Animate Width Variable | Variable or expression that drives runtime width animation. | PLC1.Value | Variable or expression |
| Animate Width Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Width Maximum Raw | End of the raw value span. The animated width reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Width Minimum px | Start of the pixel span. The animated width runs from 0 px up to the difference between Maximum px and Minimum px. | 80 | px |
| Animate Width Maximum px | End of the pixel span. With Minimum px at 0, this is the width at full scale. | 220 | px |
| Animate Width Reverse | Sets the edge the width grows from. Cleared grows the object to the right from the left edge. Selected grows it to the left from the right edge. | false | Boolean |
| Animate Top Variable | Variable or expression that drives runtime top-position animation. | PLC1.PositionTop | Variable or expression |
| Animate Top Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Top Maximum Raw | End of the raw value span. The offset reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Top Minimum px | Start of the pixel span. A rising value moves the object upwards from its resting position by up to the difference between Maximum px and Minimum px. To move the object downwards, set Minimum px above Maximum px. | 100 | px |
| Animate Top Maximum px | End of the pixel span. A rising value moves the object upwards by up to the difference between Maximum px and Minimum px. | 260 | px |
| Animate Left Variable | Variable or expression that drives runtime left-position animation. | PLC1.PositionLeft | Variable or expression |
| Animate Left Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Left Maximum Raw | End of the raw value span. The offset reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Left Minimum px | Start of the pixel span. A rising value moves the object to the right from its resting position by up to the difference between Maximum px and Minimum px. To move the object to the left, set Minimum px above Maximum px. | 200 | px |
| Animate Left Maximum px | End of the pixel span. A rising value moves the object to the right by up to the difference between Maximum px and Minimum px. | 420 | px |
No rows match the filter.
Rotation
Configure the rotation of the SVG object. The fixed Rotation angle and the free-running rotation are independent and can be combined: the object is first turned to its fixed angle and then keeps turning from there.
Free-running rotation is applied in runtime. In the design environment the object stays still so that it can be selected, moved, and resized.
| Setting | Description | Example | Units |
|---|---|---|---|
| Rotation | Fixed rotation angle applied to the object. Accepts a value, a variable, or an expression. | 45 | Degrees |
| Transform Origin | Point the object rotates around. Left empty the object turns around its own centre. | center | CSS transform origin |
| Rotate Continuously | Turns free-running rotation on while the value resolves to true, which is how a running fan, pump, agitator, or mixer is shown. Accepts true or false, a variable, or an expression, so the movement can follow a run feedback. | PLC1.Fan1_Running | Expression |
| Rotation Speed | Speed of the free-running rotation in degrees per second, so a larger value turns faster. Accepts a value, a variable, or an expression, which lets the symbol turn at the speed the device reports. A negative value turns the other way. | 90 | Degrees per second |
| Rotation Direction | Direction of the free-running rotation. Accepts a value, a variable, or an expression, so it can follow the direction the drive reports: a positive value turns clockwise and a negative value turns counter clockwise. Clockwise and Counter Clockwise are accepted as text, and a true or false value is read as a reverse signal, where true turns counter clockwise. Leave empty to turn clockwise. Often not needed, because a Rotation Speed that can go negative already sets the direction. | -1 | Signed value |
No rows match the filter.
Access Control
Configure access control for the SVG object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Access Control Enable | Enables access control evaluation for the object. | true | Boolean |
| Access Control | Expression controlling who can use or see the object. | SYSTEM.UserGroups == "Operators" | Expression |
| Access Control Filter | CSS filter applied when access control is used to alter the object appearance. | blur(0px) contrast(30%) | CSS filter |
No rows match the filter.
Visibility
Configure the runtime visibility and blinking behavior for the SVG object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Visibility | Expression controlling whether the object is visible. | PLC1.SvgVisible | Expression |
| Blink | Expression or boolean controlling SVG blinking. | PLC1.AlarmActive | Boolean or expression |
| Blink Speed | Blink speed used during runtime. | 500 | ms |
| Blink Offset | Blink offset used to stagger blinking between objects. | false | Boolean |
No rows match the filter.