SVG矢量图形库可用的关键在于命名统一、结构清晰、导出可控：命名须带状态前缀（如SVG_base、SVG_sta）；图层须分组独立且全部可见；导出必须用“导出为SVG”并清理冗余代码，确保ID与前端逻辑对齐。
SVG矢量图形库要真正可用、可维护、可交付，光画得好看没用，关键在命名统一、结构清晰、导出可控。这三点不落实，前端调用时就会状态错乱、样式丢失、动画失效。
命名必须带状态前缀
所有图层名开头必须是明确的状态标识，不能靠人工记忆或备注解释。常见错误是用“泵1_运行”“阀门_关闭”这类模糊表达，导致代码无法自动识别状态逻辑。
- SVG_base：只放静态底图，比如设备轮廓、文字标签，不参与任何交互或切换
- SVG_sta：仅承载二值状态（如开/关、在线/离线），同一图层内只能有两种视觉表现，不能混入动画或告警元素
- SVG_ani：专用于循环动效（如旋转风扇、流动箭头），不可和SVG_alert共用一个组
- SVG_alert：只负责告警态变化（红闪边框、闪烁图标），不能承担开关逻辑或持续动画
图层结构要分组独立且同时可见
AI 或 Figma 中每个状态必须单独成组，组名与命名规范完全一致。隐藏某个状态组看似方便预览，实则导出时会被自动剔除——因为导出工具只保留“眼睛打开”的图层。
- 禁止把 SVG_base 和 SVG_ani 合并在一个父组里再手动隐藏某一层
- 所有状态组必须保持可见（眼睛图标开启），哪怕当前只调试一种状态
- 避免使用“合并图层”“拼合路径”等破坏层级的操作，否则前端无法单独控制某一部分
导出必须用“导出为”，并清理冗余代码
直接右键“导出所选对象”或“导出为SVG”才能保留全部图层结构和ID信息；用“复制SVG代码”或截图转SVG会丢失分组关系和状态标识。
- 导出后需检查文件中是否完整包含
<g id="SVG_base"></g>、<g id="SVG_sta"></g>等对应节点 - 删除无用的
xmlns:xlink、inkscape:、adobe:等私有命名空间和注释 - 确保
viewBox属性存在且合理，避免宽高硬编码导致缩放异常
设计稿与代码逻辑必须对齐
前端通过 class 或 ID 控制显示/隐藏某组，比如 document.getElementById('SVG_sta').style.display = 'block'。如果设计稿里没有对应 ID 或组被合并了，这段代码就失效。
- 交付前用浏览器打开 SVG 文件，查看源码确认各状态组 ID 是否准确、是否嵌套正确
- 让开发人员参与设计评审，提前对齐状态定义（比如“离线”到底是 SVG_sta 还是 SVG_alert）
- 建立命名检查清单，每次交付前逐项核对前缀、分组、可见性、导出方式
