svg规范核心是命名前置、viewbox适配、导出保留结构：命名须带svg_base/ani/alert/sta四类前缀；根元素必设viewbox，禁用硬编码宽高；导出必须用“导出为”并清理冗余代码。
团队在 H5 项目中使用 SVG，光靠“画完导出”远远不够。命名混乱、尺寸不统一、导出方式随意，会导致状态切换失效、样式错乱、前端反复返工。真正规范的核心就三点：命名前置可识别、尺寸适配响应式、导出保留结构且轻量。
命名必须带状态前缀，且全项目唯一
所有图层/分组名必须以明确状态标识开头，禁止用“泵1_运行”“灯开关_on”这类模糊命名。统一采用以下四类前缀，每个前缀含义固定、不可混用：
- SVG_base：静止底图，所有状态都叠加其上，不含任何交互逻辑
-
SVG_ani：仅用于循环动画（如旋转风扇、流动液位），对应代码中
<g id="SVG_ani" style="display:block"></g> - SVG_alert：仅用于告警态变化（如红闪边框、叹号图标），不可和 SVG_ani 同组
- SVG_sta：仅用于二值开关状态（开/关、在线/离线），同一图层内只允许两种视觉表达
尺寸设置优先用 viewBox，慎设 width/height
SVG 根元素应始终声明 viewBox（如 viewBox="0 0 24 24"），它定义了坐标系和宽高比，是响应式缩放的基础。是否添加 width 和 height 要看使用场景：
- 直接内联到 HTML 中：只写
viewBox，不设宽高，由 CSS 控制尺寸（如width: 24px; height: auto） - 作为
<img>引入：建议同时设width和height，避免布局抖动 - 需固定像素尺寸的图标（如按钮内图标）：用
viewBox+ CSS 尺寸组合，禁用px单位硬编码在 SVG 文件里
导出必须用“导出为”，禁用“存储为”
在 AI 或 Figma 中导出时，务必选择“导出为”而非“存储为”。后者会保留大量冗余代码（如自动生成的 class、ID、注释、XML 声明），导致文件体积膨胀、样式污染、浏览器解析异常：
- 导出前手动删掉
<?xml version="1.0" encoding="UTF-8"?>行 - 关闭“响应式”“最小化”等自动优化选项，确保结构完整
- 导出后用 VS Code 检查编码格式，确认为 UTF-8 无 BOM
- 上线前建议用 SVGO 工具压缩，但不删除
id和style属性——它们是前端控制状态的关键
不复杂但容易忽略：命名、viewBox、导出方式这三步对齐了，SVG 才真正具备可维护性与工程稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
