SVG 优化压缩

概述

SVG 优化压缩工具基于 SVGO 引擎，将上传的 SVG 文件去除冗余标签、注释和无效属性，显著缩小文件体积，适合在将图标或插图放到网页前进行压缩处理。

体积压缩的主要来源

设计软件（Illustrator、Figma、Inkscape）导出的 SVG 通常包含大量编辑器元数据：图层名称、注释、未使用的样式定义、过高精度的浮点坐标（如 23.456789）。这些内容对浏览器渲染没有作用，删除后视觉效果完全不变，但文件可以减小 30–70%。

多遍处理的实际效果

开启"多遍处理"后，SVGO 会对同一文件重复执行优化直到体积不再减少。对于嵌套复杂、含大量 <g> 分组的文件，多遍处理通常比单遍再减少 3–10%；对于本已简单的图标，差距可以忽略。多遍处理会增加处理时间，但对于浏览器端运算通常在 1 秒内完成。

美化代码的使用场景

"美化代码"会将压缩后的单行 SVG 重新格式化为缩进可读的形式，方便手动编辑或调试。若目标是最小化文件体积（用于生产部署），则不建议同时开启美化，两者目标相反。

需要谨慎的优化选项

默认启用的选项均经过测试，对常规图标安全。以下选项对特定场景可能有副作用：

  • 清理 ID：会重命名和删除未被引用的 ID。若 CSS 或 JavaScript 通过 ID 选择器控制 SVG 元素动画，关闭此选项
  • 移除脚本元素 / 移除样式元素：SVG 内嵌动画或交互依赖这些标签，开启后动画会失效
  • 移除 viewBox：会导致 SVG 在响应式布局中无法自动缩放，除非已有固定宽高，否则不建议开启

优化在浏览器本地完成，文件不会上传到服务器。