SVG 工作流最佳实践：从设计到代码，保持干净与可扩展
by Michael Foster, Frontend Engineer
结构与命名
- 使用
<symbol>或分组<g>管理可复用部分 - id/class 命名遵循 kebab-case：
logo-mark,wordmark - 删除编辑器冗余（clipPath、mask 若非必要尽量不用）
尺寸与视窗
- 统一 viewBox 比例（如 0 0 256 256）
- 导出多尺寸不如导出一个高质量 SVG，让前端按需缩放
颜色与主题
- 使用
currentColor适配暗色主题 - 需要固定品牌色时，仅在根层使用
fill，避免层层覆盖
压缩与校验
- SVGO 压缩；确保不破坏渲染
- PR 中加入小尺寸快照（24px/32px）做回归测试
干净的 SVG = 更小的包体 + 更快的集成。