保留正确的坐标系统

viewBox 决定 SVG 如何缩放到不同布局尺寸。删除它可能使图形只能按固定大小显示,或在容器中意外裁切。宽度和高度属性可以根据组件调整,但通常应保留原有 viewBox。

优化后应至少用两个 CSS 尺寸检查文件。细线、滤镜和裁剪路径的问题,有时不会在单一的大尺寸预览中出现。

只删除用途明确的数据

编辑器注释、生成器元数据、隐藏图层和过高的小数精度通常不会改变静态图片,可以安全精简,同时让代码更容易检查。

ID、class 和 data 属性可能被 CSS、JavaScript、遮罩、渐变或动画使用。如果其他文件会操作 SVG 内部元素,替换原文件前必须检查优化后的代码。

  • 没有测试固定尺寸替代方案时保留 viewBox
  • 检查渐变、遮罩、滤镜与裁剪路径
  • 保留 CSS 或脚本使用的 ID
  • 按照实际展示尺寸对比最终文件

在最终页面处理无障碍信息

SVG 作为普通图片承载信息时,应通过外层 HTML 提供有意义的替代文本。纯装饰图形应从辅助技术中隐藏,避免重复朗读附近文字。

未优化源文件应保存在版本控制或设计归档中。优化文件只是发布副本,可能会主动删除未来编辑需要的信息。