优化不是一次点击，而是一轮审查
文件变小了，图形真的没变吗？用证据确认。
更小的 SVG 只是候选结果。sanitize 会主动移除活动内容，multipass 会重复执行优化流水线；缩放方式、渐变与滤镜引用、可访问名称和实际渲染都要在交付前逐项检查。
优化前4.8 KB
<svg viewBox="0 0 64 64" width="64" height="64"> <!-- Figma export --> <title>Signal mark</title> <path fill="#BFD456" d="M8 32 …" /> </svg>
优化后2.1 KB
<svg viewBox="0 0 64 64"> <title>Signal mark</title> <path fill="#bfd456" d="M8 32…"/> </svg>
减少 56% RAW BYTES
哪些内容离开了文件
按 SVGO 插件造成的变化审查优化结果。
SVGO 会按顺序执行一组转换插件。下列项目是需要检查的变化类别，并不代表每个输入都包含、也都会移除这些内容。开启 sanitize 时，脚本、事件属性和 javascript: 引用会被主动删除，交互效果可能随之改变。
元数据
PLUGIN 01编辑器、生成器信息和注释
确认不再需要来源信息后通常可安全移除
标记结构
PLUGIN 02空分组和冗余属性
检查 CSS 选择器和动画挂钩
属性值
PLUGIN 03颜色、数值和路径精度
对比细线条和小尺寸图标
引用关系
PLUGIN 04ID 与复用的渐变、滤镜等资源
把它们视为引用图，不能孤立处理字符串
尺寸约定
viewBox 定义坐标系。
removeDimensions 会移除 width 和 height，让图标更容易由 CSS 响应式控制；若同时失去 viewBox，SVG 可能无法按预期缩放。因此移除固有尺寸需要显式开启，而默认流水线会保护 viewBox。
viewBox保留定义坐标系和响应式缩放
width / height可选移除固有尺寸，可由 CSS 接管
宽高比需要检查meet、slice 和对齐方式会改变取景
<title>保留在具体使用上下文中可能提供可访问名称
引用风险图
同一个 ID 可能被多个位置引用。
#brandGradient<linearGradient>fill="url(#brandGradient)"CSS #brandGradient<animate href="#mark">
- defs 与渐变等绘制资源
- mask、clipPath 与 filter
- CSS 选择器和脚本
- 动画与外部片段引用
交付闭环
压缩的最后一步，是人眼可见的对比证据。
01
执行优化
在浏览器本地运行选定的 SVGO 流水线。
02
对比体积
比较原始字节数；gzip 属于后续传输流程。
03
按 16 / 64 / 256 px 渲染
检查裁切、精度损失和取景变化。
04
检查名称和引用
核对 title、ID、渐变、mask、filter 与 CSS 挂钩。
05
交付并持续回归
对品牌图形等身份敏感资产使用视觉回归测试。