SVG文件太大？8个压缩优化技巧

SVG 动辄几百 KB 甚至几 MB，通常是锚点过多、路径冗余、编辑器元数据和小数精度过高造成的。下面 8 个技巧按「从源头到交付」的顺序排列，全部可以落地。

一、路径层面：减锚点、并路径

技巧1：减少锚点（简化路径）

锚点越多，文件越大、渲染越慢。转换时适当提高平滑度，从源头减少锚点；已有 SVG 可用 Illustrator 的「对象 → 路径 → 简化」或 Inkscape 的「路径 → 简化」（Ctrl+L）削减冗余锚点。在 PolySVG 转换工具 里调节平滑度与颜色数，也能实时权衡效果与体积。

技巧2：合并路径与图层

把填充色相同的多条路径合并成一条，减少重复属性；压平无意义的分组嵌套，删除隐藏图层与空元素。设计软件里可用路径查找器的「联集」或合并图层后再导出。

二、文件内容：删元数据、降精度

技巧3：移除编辑器元数据

Illustrator、Inkscape 导出的 SVG 常带编辑器命名空间、<metadata>、注释与导出设置，这些都不影响渲染，手动删除或交给 SVGO 自动清理。注意保留 <title>、<desc>，它们对无障碍有用。

技巧4：降低小数精度

路径坐标常带 6-8 位小数，而屏幕渲染只需要 1-2 位。在 SVGO 配置中把数值精度（floatPrecision）降到 1-2，体积明显下降且肉眼无差。极小图标注意别过度压缩坐标，以免图形变形。

三、自动化：SVGO一键压缩

技巧5：用SVGO自动优化

SVGO 是 SVG 优化的事实标准工具，内置几十个插件：去注释与元数据、合并路径、优化路径指令、清理数值等。基本用法：

npx svgo input.svg -o output.svg

典型文件可减小 30%-70%。注意两点：不要移除 viewBox 属性，否则缩放会出问题；需要 CSS 改色的图标保留 fill 继承，别把颜色写死。

优化前后用文件体积与浏览器开发者工具里的实际传输大小做对比，确认收益；每次只改一类参数，效果异常时容易定位是哪一步引入的问题。

四、结构与复用：符号化、控色层

技巧6：defs与use复用重复图形

同一图标在页面出现多次时，用 <defs> 定义一次、<use> 引用多次，或做成 SVG 雪碧图，体积与请求数一起下降。

技巧7：控制色层，避免内嵌位图

矢量化时降低颜色数减少色层；能用纯色就不用复杂渐变。尤其避免在 SVG 里内嵌 base64 位图——那会让矢量文件变成位图载体，体积失控。转换残留的杂路径可在 在线编辑器 里点删清理。

五、交付：传输压缩与缓存

技巧8：开启gzip/Brotli与缓存

SVG 是文本，服务器开启 gzip/Brotli 后传输体积通常还能再降 60%-80%；给静态 SVG 设置长缓存头。极小的图标可直接内联进 HTML，省掉请求。原理见 SVG的优势；想在转换阶段就控制体积，读 图片转SVG的方法。

顺序很重要：源头控制锚点与色层，文件里清理元数据与精度，再上 SVGO，最后做传输压缩。四层叠加，SVG 体积通常能缩小一个数量级。