SVG 文件太大怎么办：svgo 与手动清理

承接搜索意图：性能

首页 › SVG 使用指南 › SVG 文件太大怎么办：svgo 与手动清理

一份从设计工具直接导出的 SVG，体积里常常有一半是编辑器元数据、注释、隐藏图层和过高的小数精度。精简不是可选项：图标会在列表里重复出现几十次，每多 1KB 都会被乘上这个次数。

本文目录

先看文件里到底有什么
svgo 做什么，哪些插件要谨慎
手动清理的三个高收益动作
压缩之外的两件事
压缩前后怎么验收

先看文件里到底有什么

用文本编辑器打开，常见冗余包括 <metadata>、、编辑器命名空间、未使用的 <defs>、transform 包裹层、以及 6 位以上的小数。线性图标如果超过 2KB，多半有可压空间；插画大图超过几十 KB 也值得处理。

删 <metadata> 与注释
删未引用的 <defs> / <clipPath>
合并可用一条 path 表达的多个节点
小数精度保留 1～2 位

svgo 做什么，哪些插件要谨慎

svgo 是社区常用的 SVG 优化工具，默认会做去注释、去元数据、合并路径、压缩数字、精简颜色等。但有几项默认或可选行为要留意：removeViewBox 会破坏响应式缩放，通常应关掉；cleanupIDs 在多个 SVG 内联到同一页时可能造成 id 冲突，需要加前缀；convertShapeToPath 会让后续编辑变困难。

保留 viewBox，否则图标无法按比例缩放
内联多张 SVG 时给 id 加前缀，避免冲突
优化前后对比渲染截图，别只看字节数
把优化纳入构建流程，而不是上线前手工跑一次

手动清理的三个高收益动作

① 删除所有写死的 fill / stroke，改成 currentColor；② 把重复的 transform="translate(...)" 折进 path 坐标；③ 如果同一页要放多个图标，考虑做成一张 SVG sprite，用 <use> 引用，减少请求数。

<!-- sprite 用法示意 -->
<svg style="display:none"><symbol id="i-close" viewBox="0 0 24 24">
  <path d="M6 6l12 12M18 6L6 18"/></symbol></svg>
<svg width="24" height="24"><use href="#i-close"/></svg>

压缩之外的两件事

给静态 SVG 配好缓存头与 gzip / brotli；列表里非首屏的图标加 loading="lazy"。体积减小和请求减少要一起做，单靠 svgo 解决不了首屏堆几十张大插画的问题。

压缩前后怎么验收

别只盯着文件小了多少。压完做三件事：把优化前后的 SVG 并排渲染在同一尺寸下，看线条有没有位移、圆角有没有变尖；把文件重新导进设计工具，确认还能正常编辑；最后在目标浏览器里看一次，尤其是用了 <use> 或 clipPath 的文件。svgo 的某些插件会合并看起来「等价」的路径，结果在低版本渲染引擎里出现细微差别。把这套验收放进构建流程，比每次上线前靠肉眼抽查可靠。