svg矢量图形库开发需确保命名统一、图层分组清晰、导出保留全部状态，三者缺一不可；必须采用svg_base/svg_ani/svg_alert/svg_sta前缀命名，各状态独立成组且同时可见，导出用“导出为”并清理冗余代码。
SVG矢量图形库开发不是简单画完导出就完事，命名是否统一、图层是否分组清晰、导出时是否保留全部状态——这三个环节任一出错，都会导致前端无法动态切换状态或样式错乱。核心在于让设计稿与代码逻辑严格对齐。
命名规范：状态标识前置，避免语义模糊
所有图层名必须以明确的状态前缀开头，且全项目唯一。不推荐用“泵1_运行”“泵2_报警”这类含糊名称，应统一采用如下格式：
-
SVG_ani：仅用于循环动画类元素（如旋转的风扇、流动的液位），对应代码中
<g id="SVG_ani" style="display:block"></g> - SVG_alert：仅用于告警态视觉变化（如红闪边框、叹号图标），不可与“SVG_ani”混用
- SVG_sta：用于开关二值状态（开/关、在线/离线），需确保同一图层内只包含两种视觉表达
- SVG_base：静止底图，所有状态都基于它叠加，不可含任何交互逻辑
图层结构：分组嵌套清晰，禁用合并与隐藏
AI 或 Figma 中每个状态必须独立成组，且组名与命名规范完全一致。关键操作原则：
- 禁止将 SVG_base 和 SVG_ani 放在同一图层组下再手动隐藏——导出时会被自动剔除
- 所有状态组需同时可见（眼睛图标打开），哪怕在设计阶段只看一种状态
- 文字图层建议转为轮廓，避免字体缺失导致渲染异常
- 渐变、滤镜等高级效果慎用，部分环境不兼容或增加体积
导出设置：选“导出为”而非“存储为”，并清理冗余
Adobe Illustrator 中务必使用“导出为” → SVG，而非“存储为”。后者会保留大量编辑元数据和随机 class 名（如 .st1、#SVGID_2），引发样式污染。
- 勾选“响应式”，取消勾选“CSS 属性”（强制内联样式更可控）
- 取消“将文本转换为轮廓”（若已提前处理过）
- 导出后手动删除文件顶部非必要声明，例如：
<?xml version="1.0" encoding="utf-8"?>和..> - 用正则全局替换掉所有
.st\d+类名及url(#SVGID_\d+)引用，改为基于 ID 的直接控制
交付前校验：三步确认法
交付给前端前，快速验证是否符合工程化要求：
- 打开 SVG 文件源码，搜索
id="SVG_，确认只存在 base / ani / alert / sta 四种前缀 - 在浏览器中打开，用开发者工具切换各
<g id="..."></g>的style="display:none/block"，观察状态是否准确呈现 - 检查
<svg></svg>根标签是否含xmlns="http://www.w3.org/2000/svg"，缺失则补上
