设计系统的 SVG Viewer 工作流
设计系统的成败取决于一致性。单个错位的图标或错误的 viewBox 都可能在产品中引发一系列小问题。SVG Viewer 为团队提供了一个共享的视觉检查点，在资源从设计转移到代码之前进行验证。这是一个简单、可重复的工作流程，已被维护不断增长的图标库的团队成功应用。
1) 接收：检查基础项
在优化或转换任何内容之前，在 SVG Viewer 中打开资源并确认这些基础项：
- viewBox 和尺寸：确保 viewBox 与预期画板匹配，并且宽度/高度没有携带遗留值
- 内边距和对齐：图标应位于一致的网格上。查找触及边缘的形状或额外的空白空间
- 描边粗细：特别是对于轮廓图标，确认整个集合中的描边宽度一致
这些检查快速、直观，比在原始标记中更容易在查看器中发现。
2) 规范化画板
如果资源感觉不对，在进行任何其他工作之前规范化画板。一致的画板使批量导出和组件大小调整更加容易。
实际步骤：
- 将设计对齐到系统网格（例如，24x24 或 20x20）
- 使用正确的 viewBox 大小重新导出
- 在 SVG Viewer 中重新打开，以确认它与基准资源对齐
3) 有目的地清理和优化
优化不仅仅是关于文件大小；它是关于可预测的输出。一个好的规则是删除你永远不需要的东西：
- 元数据和编辑器特定属性
- 未使用的组或空节点
- 可能造成 CSS 冲突的重复 ID
运行清理，然后使用 SVG 优化器 优化，再在 SVG Viewer 中重新打开以验证没有任何变化。
4) 建立命名约定
一致的名称改善开发者体验。选择一个系统并坚持下去。例如：
icon-alert-filled.svgicon-alert-outline.svglogo-acme-primary.svg
当开发者将 SVG 文件名映射到组件名称时，一致的模式减少了猜测。
5) 为库导出
一旦 SVG 通过视觉检查，以系统需要的格式导出：
- 原始 SVG 用于内联使用
- PNG 用于文档或 Figma 到开发的参考
- 通过 SVG 转 React 输出 React 组件 用于 UI 库
记录导出设置，以便每个团队成员获得相同的输出。
6) 合并前快速审查
快速审查步骤可以节省后续时间。在 SVG Viewer 中，将更新的资源与现有资源并排打开并比较：
- 视觉比例
- 对齐
- 感知重量
如果有任何不对劲，在进入仓库之前修复它。
最终要点
SVG Viewer 工作流的目标不是增加步骤，而是消除意外。快速的视觉检查、一致的画板和可预测的导出使设计系统在增长时保持稳定。如果你的团队曾经交付过在 Figma 中看起来正确但在生产中错误的图标，这个工作流程将防止下一次发生。
下一步
- 在 SVG Viewer 中完成资源入库前检查。
- 用 SVG 优化器 统一清理和压缩策略。
- 需要组件化交付时，使用 SVG 转 React。