把 HMI 符号导入 Ignition Perspective
在所有 HMI 中，Ignition 的导入路径最简洁：把 SVG 放进 Image Management，放置一个 Image 组件，再用 switch() 表达式根据状态标签选择对应的图片。Perspective 和 Vision 的做法完全相同。SVG 来自符号编辑器（你自己的设备）、社区库（CC BY 4.0）或图标库（标记、箭头、导航图标）。
操作步骤
将符号导出为 SVG
- 自己画：在符号编辑器中，用形状、ISA 元素和印章组合出设备（方形符号用 512 × 512 画布，宽版的电机加标签布局用 256 × 128），然后点
↓ SVG。导出的是纯 SVG，颜色为十六进制字面值——没有 CSS 类、脚本和外部字体——这正是 Perspective 和 Vision 渲染器所喜欢的。 - 复用：从社区电机、阀门、泵或储罐中打开一个符号并点击 Download SVG。在项目文档中注明作者；需要先修改就用 Open in builder。
- 标记和图标：报警优先级标记、状态标记、箭头以及导航 / 系统栏图标（主页、报警、趋势、消音）来自图标库，均为 SVG。
每个状态一个文件：先做好底图，Save 为模板，再按状态更改主体填充色（灰色停止、白色或绿色运行、黄色无反馈、蓝色手动、深灰禁用），为报警变体加盖 P1 / P2 标记，分别导出为 {kind}_{state}.svg，例如 motor_3ph_running.svg、motor_3ph_running_p1.svg。位号文字不要放进符号；由嵌入视图添加（第 5 步）。
在编辑器中绘制不需要账户。下载需要：免费账户每月 5 次下载，Starter 50 次，Studio 1,000 次。你自己发布的符号有同样大小的单独额度。
上传到 Image Management
在 Designer 或 Gateway 网页界面中：
- Designer：Tools → Image Management。
- Gateway：Config → System → Images。
建立文件夹结构：symbols/motor/、symbols/pump/、symbols/badges/ 等。把 SVG 文件拖进各个文件夹（支持多选）。路径就是图片的引用名（例如 symbols/motor/motor_3ph_running.svg）。
放置 Image 组件（Perspective）
打开一个 Perspective 视图。从 Component Palette → Display → Image。拖到画布上。
在 Property Editor 中，把 props.source 设为图片路径：
用 switch() 表达式绑定状态
右键 props.source → Edit Binding → Expression。使用：
这个表达式会计算状态 INT 并返回对应的图片路径。标签值变化时 Ignition 会自动重新加载图片。后缀只是第 1 步的命名约定——如果你的文件命名不同，改相应的字符串即可。
（推荐）封装为 Embedded View / Template
Perspective：为每种设备创建一个视图（FP_Motor3ph），带两个参数：state（INT）和 tag（字符串）。在视图内放置绑定到这些参数的 Image，再加一个显示位号的 Label。在需要的地方以 Embedded View 的形式放入该视图，并按实例绑定 state 和 tag。
Vision：使用带 State 整型参数的 UDT 驱动的 Template——结构相同，经典 Vision 风格。
与 Perspective 外观匹配
Perspective 的默认主题是扁平、浅色的。编辑器画出的符号采用 2 px 描边、无渐变和平静的灰色主体，放在上面已经很协调。符号库（英文页面）里的 ISA-101 平面符号也是如此，它们以可编辑的 SVG 逐个下载。在编辑器中由你自己选择填充色——并保持状态颜色的语义（红色和橙色只用于报警）。
推荐的 PLC 编码（Ignition 标签脚本）
如果你希望由 Ignition 自己计算状态（例如 PLC 只提供布尔量），添加一个 Derived Tag，表达式如下：
Perspective 的尺寸选择
| 目标 | 图片尺寸 | 说明 |
|---|---|---|
| 桌面浏览器 | 256×128 | SVG 可缩放——设置 Image 组件的尺寸，而不是源文件 |
| 平板（移动端） | 192×96 | SVG，组件框更小 |
| 手机 | 128×64 | SVG；考虑隐藏非关键设备 |
| 墙面大屏（4K） | 320×160 或 512×256 | SVG 依然可缩放；如果必须用 PNG，从 512×512 或 640×360 画布导出 |
常见问题
- 表达式返回空字符串：
switch()的默认分支必须是带引号的字符串，而不是数字。要写"stopped"，不是stopped。 - 状态切换时图片闪烁：把 props.fit.mode 设为
contain并固定组件尺寸——否则 Perspective 每次变化都会重新计算布局。 - SVG 在 Vision 中颜色不对：Vision 使用 JVM 的 Batik 渲染器栅格化 SVG，它对 CSS 的支持比较保守。编辑器和社区的 SVG 使用
fill="#..."字面属性，所以没有问题；如果你手动编辑 SVG，避免使用 CSS 类和变量。 - SVG 内的文字显示不一样：编辑器的文字使用 Inter 字体，Vision 的 JVM 会替换它。位号不要放进符号，改用 Label / Text 组件。
- 各状态之间颜色不一致：手动为变体重新上色时，请沿用配色：
#9E9E9E停止、#2E7D32运行、#FBC02D无反馈、#1976D2手动、#616161禁用、#D32F2FP1、#F57C00P2。编辑器的填充色板正是这些值。
下一步
- 9 种电机状态编码详解
- 为什么平静的 HMI 配色更胜一筹
- ISA-101 完整参考
- Perspective 绑定或主题问题？到论坛提问——Ignition 话题放在厂商工具分类下。
先做符号，再绑定
符号编辑器绘制无需账户。免费账户每月 5 次下载；以 CC BY 4.0 发布你自己的符号，它们另有每月 5 次的单独额度。也可以从其他工程师已经画好的符号开始，在你自己的视图里测试 switch() 模式。