减小 SVG 体积并不是单纯追求一个更小的数字。SVG 既是一张图，也是一个带有结构和引用关系的 XML 文档。路径负责绘制形状，属性还可能控制缩放、渐变、蒙版、可访问名称、CSS、动画，以及业务代码寻找某个节点的方式。真正可靠的优化，是删掉可以解释的开销，同时让这些关系继续成立。
下面的流程从保留可编辑源文件开始，先测量真实交付副本，再逐项检查优化结果。它不鼓励一次开启所有激进选项，而是让设计师和开发者能够回答两个问题：具体少了哪些字节，以及为了这些字节有没有破坏下一环节依赖的结构。
SVG 为什么会变大
设计工具首先要保证文件能够继续编辑和重新导入，不会只为网页传输服务。Figma 或 Illustrator 导出的 SVG 可能包含编辑器命名空间、注释、元数据、很长的小数、冗长变换、宽松的换行缩进，以及编辑器内部使用过的 ID。生成器还可能输出重复几何、过高数值精度或没有整理过的路径。相反，一个手写图标可能已经接近合理下限。
不同原因应该对应不同处理。注释和编辑器元数据通常可以从交付副本删除；长坐标可以在视觉对比后缩短；重复形状可以用 symbol 与 use 复用，但这种重写也可能让设计师后续编辑更困难。若文件包含一张 Base64 位图，真正占体积的往往是像素数据，整理 XML 几乎不会改变总量。文字转曲后出现的大量路径同样不是简单“垃圾”。
因此不要先假设每一个 KB 都是冗余。打开文件，区分标记、嵌入数据和必要几何，先找出体积来源，再决定优化方式。
把源文件和交付副本分开
优化之前先保存原始导出。如果作品来自设计稿，应当把设计稿视为权威来源，并给优化后的文件使用清楚的命名。这样，下次需要调整圆角、修改字标、恢复动画或重新导出时，不会只能在经过变换的交付文件上逆向操作。
版本控制也是安全网的一部分。把原始文件或可追溯的设计来源保存在团队认可的位置，再把优化副本作为独立差异审核。文本 diff 能直接显示注释被删除，同时 viewBox、aria-labelledby 和被引用的 ID 仍存在；只有截图无法证明这些关系。
不要因为某个尺寸下的预览正常，就覆盖唯一副本。响应式裁切、可访问名称丢失、动画目标失效，都可能在静态预览里看不出来。能够回退本身就是质量要求。
先建立真实字节基线
测量准备交付的那份 SVG 的 UTF-8 字节数。文件管理器经常只显示四舍五入后的 KB，字符数遇到中文标题或说明时也不等于字节数。原始值和优化值必须采用同一种计算方式，比较才有意义。
建议记录文件名、预设、优化前字节、优化后字节和警告。如果结果反而变大，应当保留原交付副本，而不是强行展示正数节省。只减少一个字节也是事实，但未必值得在管线里增加一次转换。
百分比也必须放回语境。编辑器导出的 374 字节 fixture 删除 175 字节，比例很明显；带有完整 ARIA 与 ID 关系的 431 字节图标只减少 14 字节，重点却是语义没有丢失。不能为了好看的比例牺牲合同。
按保守顺序逐步处理
第一轮只做容易解释的整理，例如删除交付环境不需要的 XML 声明、doctype、注释、编辑器元数据，并规范属性格式。完成后马上比较画面。只有这一轮稳定，再考虑小数精度、路径数据、颜色写法和变换压缩。
这种顺序便于定位问题。如果安全预设正常，而更紧凑的预设改变了图形，风险就集中在第二轮；如果一次启用几十种变换，审核者只能面对一份很大的差异，很难知道哪个步骤造成偏差。
需要本地测量时，可以打开浏览器本地 SVG 压缩工具。Logo、可访问图标、动画素材以及带代码钩子的组件先用安全预设；只有在能够重复检查画面、几何和集成行为时，再对比平衡预设。
检查 viewBox 和响应式缩放
viewBox 定义了 SVG 的坐标系统，是图形能够随容器缩放的核心。删除它可能把响应式素材变成固定尺寸，也可能改变 preserveAspectRatio 的裁切方式。优化后要确认四个数值仍符合预期，并在多个 CSS 尺寸下观察结果。
测试时不要只双击打开文件。要使用真实交付方式：<img>、CSS 背景、内联组件或 sprite。一个文件独立打开正常，不代表放进限制宽高的组件后不会裁切。窄容器、宽容器、高像素密度屏幕以及有意超出边界的视觉都值得检查。
width 和 height 也不是天然冗余。它们可以帮助浏览器提前保留布局空间，降低页面跳动。是否保留，应由组件合同决定，而不是机械删除。
保护 ID 与所有引用关系
ID 会连接渐变、蒙版、裁切路径、滤镜、ARIA 标签、CSS 选择器和脚本。优化器若重命名或删除 ID，简单预览可能仍然正常，但内联组件或同页多个实例可能失效。接受输出前，要查找 url(#...)、href="#..."、aria-labelledby、aria-describedby、CSS 选择器以及应用代码中的引用。
同一页面内联多个 SVG 时，重复 ID 也可能发生碰撞。正确答案不一定是全局删除 ID。构建时加前缀、组件隔离，或使用明确配置的优化器，往往更可靠。团队应记录采用的策略，让下一次导出遵循同样规则。
通过 <img> 加载的单文件，其内部引用通常相互隔离；直接内联时，周围文档就是运行环境。风险检查必须模拟真实形态。
保留可访问性语义
有信息含义的 SVG 可能通过 <title>、<desc>、role="img" 和 ARIA 引用提供名称或说明；装饰图形也可能明确使用 aria-hidden="true"。优化不能套用一个万能模板，而应该保留产品已经选择的可访问合同。
优化后，在目标页面查看可访问性树，确认 title 与 description 的目标 ID 仍存在，名称没有消失，也没有与相邻文字重复。如果 SVG 通过图片标签加载，HTML 的 alt 会参与最终体验；如果 SVG 内联，内部语义通常更重要。
保守并不等于保留编辑器生成的无意义标题。先判断图形承担什么信息，再有目的地保留或删除语义，才是可审核的处理。
测试 CSS、动画与交互
SVG 可以包含 class、展示属性、<style>、SMIL 动画，以及 JavaScript 使用的数据属性。静态预览只能覆盖第一帧。应该实际触发 hover、focus、主题切换、动画循环和应用状态变化。
如果样式定义在文件外，检查 class 和 data hook 是否保留；如果动画指向某个 ID，检查目标和时间属性；如果不可信来源里出现脚本或事件处理器，不要因为画面正常就允许执行。安全优化器应删除主动脚本内容，并明确报告这一变化。
外部资源还要单独处理。远程样式表、外部图片 URL 和相对资源路径会带来隐私、稳定性与安全问题。应该在优化之前验证或拒绝，而不是期待代码变短后风险自然消失。
一次可复核的 ARIA fixture 实测
我们把仓库中的 aria-ids.svg 交给工具实际使用的安全优化器。原文件为 431 字节，结果为 417 字节，减少 14 字节，约为 3.25%。优化器没有返回警告，输出仍是有效 SVG。
这个例子故意没有追求夸张比例。fixture 包含 viewBox、aria-labelledby、title、description、蒙版 ID、class 和 data hook。回归测试会检查安全与平衡预设都保留这些结构。若为了多省几十字节破坏其中任意关系，结果就不合格。
风险检查通过的依据，是被引用 ID、可访问标签、蒙版、class 与钩子均留在输出，而不是只看两张缩略图相似。这组数字只描述一个已知 fixture 和一个预设，不代表所有 SVG 的平均表现。
区分源码精简与传输压缩
标记优化会改变 SVG 源码；Gzip 和 Brotli 则在存储或 HTTP 传输时压缩字节，浏览器解析前会恢复原文本。它们相关，但解决的不是同一个问题。
冗长 SVG 因为 XML 词汇重复，可能在网络上压得很好，但它在仓库、未压缩缓存、打包和解析阶段仍有额外成本。已经精简的 SVG 也依然可以从 Brotli 获益。常见做法是先保存经过审核的交付副本，再让服务器针对传输启用内容编码。
SVGZ 是 Gzip 压缩后的 SVG 文件。它在浏览器、CDN 和设计工具中的使用便利性可能不如普通 .svg 加正确的 Content-Encoding。采用之前要验证真实平台，不能只改扩展名并假设所有消费者都会解码。
什么时候已经无法继续缩小
有些文件本来就很紧凑，有些体积主要来自必要路径、嵌入图片或转曲文字。若安全优化器只让 57 字节图标减少一个字节，并不意味着失败，可能只是已经没有安全开销。
这时应重新审视素材方案，而不是盲目提高激进程度。照片纹理能否在明确隐私边界下改为外部 WebP？复杂插画能否按路由拆分，避免全站加载？重复图标能否进入 sprite 或组件库？文字能否保留为真实文本而不是轮廓？这些属于设计和架构决定，不是一个 minifier 开关。
还要比较真实 Brotli 结果。为了几个原始字节把源码变得难以维护，却没有改善传输体积，并不是好交易。有人需要读和改的 SVG，应保留合理可读性。
发布前检查清单
发布前保留源文件，记录字节基线，先运行安全预设，并比较前后预览。检查 viewBox、宽高行为、ID 与引用、可访问名称、class、CSS、蒙版、渐变、动画和代码钩子。拒绝意外外部资源，再把文件放进真实组件和用户会看到的尺寸中验证。
如果平衡预设确实带来额外收益，重新执行所有相关检查。提交交付副本时记录预设和字节数，并确认服务器仍按需要启用 Gzip 或 Brotli。没有代表性样本时，不要对外宣称平均压缩率。
这套流程的价值，是让优化变成一件可预期的工程工作：每个变化有理由，每个风险有检查，任何时候都能回到源文件。
继续阅读具体场景
编辑器导出常见隐藏图层和共享 paint ID，可参考Figma SVG 网页优化流程。生成式素材还要补来源、可访问性和代码钩子检查，可阅读AI 生成 SVG 的生产清单。如果 compressor、optimizer 与 minifier 的术语容易混淆，SVG 压缩、优化与精简对照会说明 SVGO、Gzip、Brotli 与 SVGZ 各自的位置。