Import HMI 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. The SVGs come from the Symbol Builder (your own equipment), the community library (CC BY 4.0) or the icon library (badges, arrows, navigation icons).
Step-by-step
Export your symbols as SVG
- Draw it: in the Symbol Builder, compose the equipment from shapes, ISA elements and stamps (512 × 512 canvas for square symbols, 256 × 128 for the wide motor-and-label footprint) and click
↓ SVG. The export is plain SVG with literal hex colours — no CSS classes, no scripts, no external fonts — which is exactly what Perspective and Vision's renderer like. - Reuse it: open a symbol from community motors, valves, pumps or tanks and click Download SVG. Credit the author in your project documentation; Open in builder to adapt it first.
- Badges and icons: alarm priority badges, state badges, arrows and navigation / system-bar icons (home, alarms, trends, horn silence) come from the icon library as SVG.
One file per state: build the base, Save it as a template, recolor the body fill per state (gray stopped, white or green running, yellow no-feedback, blue manual, dark gray disabled), stamp the P1 / P2 badge for the alarm variants, export each as {kind}_{state}.svg — e.g. motor_3ph_running.svg, motor_3ph_running_p1.svg. Leave the tag text out of the symbol; the embedded view adds it (step 5).
Composing in the Builder needs no account. Downloading does: a free account gives 5 downloads a month, Starter 50, Studio unlimited. Symbols you publish yourself are always free to download.
Upload to Image Management
In the Designer or the Gateway web interface:
- Designer: Tools → Image Management.
- Gateway: Config → System → Images.
Create a folder structure: symbols/motor/, symbols/pump/, symbols/badges/, etc. Drag the SVG files into each folder (multi-select works). The path becomes the image reference (e.g. symbols/motor/motor_3ph_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. The suffixes are just the naming convention from step 1 — if you named your files differently, change the strings.
(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 and a Label for the tag. 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.
Matching the Perspective look
Perspective's default theme is flat and light. Symbols drawn with 2 px strokes, no gradients and the calm gray body from the Builder already sit well on it. If you want the badges and navigation icons from the icon library in the Perspective accent colours, the library sidebar has an Ignition Perspective style preset that recolors them before download. In the Builder, choose the fills yourself — and keep the state colours semantic (red and orange only for alarms).
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 | SVG still scales; if you must use PNG, export from a 512×512 or 640×360 canvas |
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 colour in Vision: Vision rasterizes SVG using the JVM's Batik renderer, which is conservative with CSS. Builder and community SVGs use literal
fill="#..."attributes, so they are fine; if you hand-edit an SVG, avoid CSS classes and variables. - Text inside the SVG looks different: Builder text is set in Inter, which the Vision JVM will substitute. Keep tags out of the symbol and use a Label / Text component instead.
- Colours drifting between states: when you recolor variants by hand, keep the palette:
#9E9E9Estopped,#2E7D32running,#FBC02Dno feedback,#1976D2manual,#616161disabled,#D32F2FP1,#F57C00P2. The Builder's fill swatches are exactly these.
What's next
- The 9 motor states encoding explained
- Why the calm HMI colour palette wins
- Full ISA-101 reference
- Perspective binding or theme questions? Ask in the forum — Ignition topics go in the vendor-tooling category.
Build the symbol, then bind it
The Symbol Builder needs no account to compose. A free account gives you 5 downloads a month; publish your own symbols under CC BY 4.0 and download them free. Or start from what other engineers already drew, and test the switch() pattern in your own view.