SVG 压缩优化

压缩后怎么确认没改坏

SVGO 处理完后，工具用浏览器把原文件和结果都按长边 400 像素画出来，逐个像素比较。颜色通道或不透明度相差超过 24/255 的像素算作有变化；有变化的像素不超过 0.1% 时属于抗锯齿误差，显示「渲染结果相同」，超过时用红色标出变化的位置。

从网页 HTML 里复制出来的 SVG 常常没有 xmlns=“http://www.w3.org/2000/svg”，这样的代码内联在网页里能显示，存成 .svg 文件却打不开。工具会在压缩前补上，并在提示里说明。

示例：ECharts 服务端渲染导出的图表

ECharts 的服务端渲染可以用 renderToSVGString() 直接得到 SVG 字符串，适合放进报告或邮件。下面这段代码用 ECharts 6.1.0 生成一张 600 × 360 的柱状图：

const chart = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 600, height: 360 });
chart.setOption({
  animation: false,
  title: { text: '2026 年各季度销售额（万元）' },
  xAxis: { type: 'category', data: ['一季度', '二季度', '三季度', '四季度'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [120, 200, 150, 80] }]
});
const svg = chart.renderToSVGString();

得到的文件是 3,553 字节，压缩后 2,452 字节（gzip 后 852 → 690 字节），渲染结果相同，没有提示。五条网格线被合并成一条路径，四根柱子也合并成一条路径。ECharts 写在 <style> 里的 .zr0-cls-1:hover 这类悬停规则无法写进元素属性，所以对应的 class 都保留了下来，中文标题和坐标轴文字不变。

示例：设计稿导出的图标

点「示例」会载入一个 512 字节、按 Figma 导出格式写的对勾图标。压缩后是 254 字节，渲染相同，但会出现两条提示：#icon-check 被删除（外层分组被合并，文件内没有用到这个 ID），.stroke 被删除（只用一次的 class 被写进了 style 属性）。如果页面 CSS 用 .stroke 改颜色，或 JavaScript 用 #icon-check 取元素，图标看起来没变，代码却失效了。这时取消「缩短并删除 ID」，或在「全部 SVGO 插件」里取消 inlineStyles 和 minifyStyles。

哪些设置会改坏 SVG

• 缩短并删除 ID（默认开）：被引用的 ID 改成 a、b，没被引用的删掉。同一页面内联多个 SVG 时，可以填「ID 前缀」避免冲突。
• 删除 viewBox（默认关）：只删除与 width、height 相同的 viewBox，删掉后 SVG 不再随 CSS 缩放（SVGO 文档）。SVGO 4 已把它和 removeTitle 移出默认配置。
• 删除 width/height（默认关）：尺寸改由 CSS 或容器决定；没有 viewBox 时 SVGO 会按原尺寸补一个。
• 删除 <title>（默认关）：读屏软件会失去图片名称。
• 小数位数（默认 3）：设成 0 或 1 时图形上的点可能明显移动，像素比对会标出来。

脚本与来源不明的 SVG

默认设置下 SVGO 会保留 <script> 和 onclick 等事件属性，工具会统计数量并提示。勾选「删除脚本和事件属性」会运行 removeScripts，SVGO 4.1.0 还会清理 <foreignObject> 里的 HTML 事件属性。浏览器把 SVG 当图片用时（<img>、CSS 背景）不执行脚本、不加载外部文件（MDN），直接打开、内联或用 <object>、<iframe> 嵌入时则会执行。本页的预览都是图片，粘贴进来的 SVG 里的脚本不会在页面上运行。SVGO 是压缩工具，处理用户上传的 SVG 时不能代替专门的过滤。

批量处理与构建

一次拖入一整个图标文件夹，每个文件一行，显示压缩前后体积、减少比例和渲染比对结果，「全部下载（.zip）」按原文件名打包（.svgz 会解压后保存为 .svg）。确定设置后，从配置面板复制 svgo.config.mjs，在项目里执行 npx svgo@4.1.0 —config svgo.config.mjs -f icons -o icons-min 就能得到同样的结果。

与同类工具的差别

2026 年 10 月 2 日用同一组文件实测。svgoptimizer.com（cn.bing.com「svg压缩」第一）在浏览器内处理，但韩国国旗和含 <script> 的文件都显示「-0%」，下载得到的是原文件（连注释都没删）；只有 viewBox 的文件在结果里多出了 width=“24” height=“24”，内联后不再撑满容器。iLoveIMG 的 SVG 压缩会把文件上传到 api11.iloveimg.com/v1/upload（在其日文版页面实测）。SVGOMG 在本地运行 SVGO 4.0.0，一次一个文件，没有 xmlns 的文件压缩后仍然没有，ID 被删、文件变大时都不提示。这几款都不做压缩前后的像素比对。

限制

• 单个文件最大 50 MB；超过 10 MB 的文件照常压缩，但不做像素比对。
• XML 有错误时，报出的行号和列号指你输入的文本（按字符计），原因用页面语言说明。不带 xmlns 的 <svg><rect></svg> 报第 1 行第 17 列：结束标签 </svg> 与最后打开的元素不对应。工具补上的 xmlns 不计入列号。
• 动画只比对第一帧；外部图片、字体和 <use href=“other.svg#id”> 在图片模式下不加载，比对不包含它们。
• 文件外的 CSS、JavaScript 用到哪些 ID 和 class，SVGO 看不到；提示只列出被删掉的，不知道谁在用。
• 内嵌的 PNG、JPEG 数据不会被重新压缩，需要参数的插件（removeAttrs 等 5 个）没有提供开关。
• 按「React 组件（JSX）」复制时，注释、<style> 块和 style 属性的转换方式与 SVG 转 JSX 转换器相同。React 样式对象无法保留的 style（如 SVGO 保留下来的 fill:red!important）会被拒绝：按钮下方显示原因，该文件的复制按钮停用；下载、批量表格中的单个下载和 ZIP 仍保存压缩后的 SVG，其他复制格式不受影响。

压缩后要转成位图，用 SVG 转 PNG 工具；要做成带 TypeScript 或 forwardRef 的 React 组件，用 SVG 转 JSX 转换器；要以 Data URI 嵌入，也可以用 图片转 Base64 工具。