Import ISA-101 symbols into Ignition Perspective
Ignition has the cleanest import path of any HMI: drop SVGs into Image Management, place an Image component, and use a switch() expression to pick the right image based on a state tag. Works identically for Perspective and Vision.
Step-by-step
Download the Ignition pack
From the catalog, click ↓ Ignition pack. You get SVGs organized in folders by category. Name format: {kind}_{state}.svg.
Upload to Image Management
In the Designer or the Gateway web interface:
- Designer: Tools → Image Management.
- Gateway: Config → System → Images.
Create a folder structure: hmi-library/motor/, hmi-library/pump/, etc. Drag the SVG files into each folder. The path becomes the image reference (e.g. hmi-library/motor/motor_3ph_canon_running.svg).
Place an Image component (Perspective)
Open a Perspective view. From the Component Palette → Display → Image. Drop on the canvas.
In the Property Editor, set props.source to the image path:
Bind state with a switch() expression
Right-click props.source → Edit Binding → Expression. Use:
This expression evaluates the state INT and returns the matching image path. Ignition reloads the image automatically when the tag value changes.
(Recommended) Wrap as an Embedded View / Template
For Perspective: create a view per equipment kind (FP_Motor3ph) with two parameters, state (INT) and tag (string). Inside, place the Image bound to those params. Drop the view as Embedded View wherever you need it; bind state and tag per instance.
For Vision: use a UDT-driven Template with a State int parameter — same structure, classic Vision style.
Style preset for Ignition
The catalog has a Style preset → Ignition Perspective dropdown that matches the Inductive Automation flat-modern style. It tweaks border radius, line weight, and accent colors to feel native in Perspective.
Recommended PLC encoding (Ignition tag scripting)
If you want Ignition to compute the state itself (e.g. when the PLC just exposes booleans), drop a Derived Tag with this expression:
Sizing for Perspective
| Target | Image size | Notes |
|---|---|---|
| Desktop browser | 256×128 | SVG scales — set the Image component size, not the source |
| Tablet (Mobile) | 192×96 | SVG, smaller component frame |
| Phone | 128×64 | SVG; consider hiding non-critical equipment |
| Wall display (4K) | 320×160 or 512×256 | Studio plan ships 512×256 source |
Common pitfalls
- Expression returns an empty string: the default case in
switch()must be a quoted string, not a number."stopped", notstopped. - Image flickers on state change: set props.fit.mode to
containand a fixed component size — otherwise Perspective recalculates layout per change. - SVG renders at wrong color in Vision: Vision rasterizes SVG using the JVM's Batik renderer, which is conservative with CSS. Use the catalog with Custom color hardcoded into the SVG instead of variables.
- Image Management upload limit: bulk-upload via the Gateway REST API (
POST /system/images) for batches of 100+ — the GUI uploader is slow.
What's next
Try the catalog free
12 symbols unlocked. Test the switch() binding pattern in your own Perspective view.