数据

SVG 优化压缩

从 Figma、Illustrator 或 Sketch 导出的 SVG 本身是规范的 XML，但里面塞满了浏览器根本不会渲染的东西：编辑器元数据、生成器注释、只包着一条路径的多余分组、精确到小数点后五位的坐标，还有写成长格式的颜色。这个工具一次粘贴就能把它们全部清掉。你贴进代码，立刻拿回体积最小且效果等价的 SVG，原始、优化后和 gzip 三个体积并排显示，还能并排预览优化前后的图形，确认形状丝毫未变。当某一遍处理顺手带走了什么——你样式表指向的某个 id、文件内部没人引用的一整套雪碧图——它会直接告诉你，而不是让你事后才发现。它就是构建流水线在用的 svgo 引擎，完全在你的浏览器里运行，粘贴的内容绝不离开这个标签页。

523 B
当前 SVG
当前 SVG523 B
节省 0%
正在加载优化引擎
8%
svgo 引擎只需一次性下载，本次访问内会被缓存。
选项

功能简介

一个 SVG 优化器值不值得用，看两点：输出可不可信，收益看不看得见。这个工具正是围绕两者打造——压得准、可上线，旁边还有数字和预览证明它是安全的。

  1. 01

    基于树的优化

    先把 SVG 解析成真正的元素树再动手：元数据、XML 声明、生成器注释、空分组、多余属性都被清掉，颜色被缩短，等于默认值的属性被删掉，路径数据被改写得更紧凑——几十项变换，而图形保持完全一致。没有脆弱的查找替换，不会因为一个渐变或嵌套 transform 而出错。

  2. 02

    带走了什么，它会告诉你

    默认预设会删掉文件内部无人引用的每一个 id，并把其余的重命名——这对图标是对的，对被 CSS 定制的 Logo、或 <use> 写在页面里的雪碧图就是错的。任何因此指向空处的引用都会列在输出下方，而「保留 ID」一键关掉整套行为。

  3. 03

    可调节的精度控制

    导出时精确到小数点后五位的坐标几乎从不需要。把它们向下取整以缩小路径数据，再用并排预览，在细节开始模糊的那一刻停下来。

  4. 04

    面向响应式的输出

    可选择去掉 width 和 height 属性，让 SVG 继承所在容器的尺寸——这是图标和内联插画需要自由缩放时的常见做法。

  5. 05

    可信的体积拆解

    原始、优化后和 gzip 体积随编辑实时更新，旁边是精确的节省百分比。gzip 那个数字才对应真正在网络上传输的量。

  6. 06

    上线前先亲眼看

    把输出切到「预览」，优化前后的 SVG 会在棋盘格上一同渲染，破损的裁剪路径或丢失的填充在你复制结果之前就一目了然。两侧各自作为一张独立的图片渲染，因此它们的 id 不会互相串味，别人写的 SVG 在这里既跑不了脚本，也拉不动它引用的任何外部资源。

如何使用

几步之内，把臃肿的编辑器导出变成精简、可上线的 SVG，全程都能看到节省和预览。

  1. 01

    把 SVG 粘贴进输入面板，或用「上传」直接从磁盘载入一个 .svg 文件。

  2. 02

    选择你的选项。想要最小结果就保持「多轮优化」开启；文件之外有东西按 id 定位、或这是一张雪碧图时打开「保留 ID」；需要图标随容器缩放时打开「移除宽高」。

  3. 03

    把输出切到「预览」，确认优化后的 SVG 渲染得和原始完全一致，读一读输出下方列出的待确认项，再看体积拆解了解收益。

  4. 04

    复制优化后的 SVG，或下载为 .svg 文件，然后放进你的标记、雪碧图或组件里。

功能说明

这些细节让输出可以放心上线、值得快速信任。

  • 基于 svgo——标准的 SVG 优化器，在解析后的树上运行而非文本替换，用的就是构建工具默认的那套预设。
  • 每个预览都作为一张图片渲染，而不是把标记注入页面，所以别人写的 SVG 在这里跑不了脚本、拉不动它引用的外部资源，也不会通过同名 id 借用另一侧预览的渐变。
  • gzip 体积用你浏览器内置的压缩来测量，所以这个数字反映的是真实服务器会发送的量。
  • 优化随编辑运行，在你停下打字片刻后开始，所以一张很大的描摹插画不会在按键之间卡死编辑器。
  • 解析错误会连同信息就地显示；而优化后变成空白的结果会被明确指出，不会被当成「节省 100%」端上来。
  • 不上传、不记录。你粘贴的 SVG（包括未发布的品牌资产）都留在浏览器里，关闭标签页即刻消失。

适合哪些场景

把 SVG 精简到只剩本质，这些场景最划算。

  1. 内联图标与 Logo

    直接嵌在 HTML 或组件里的 SVG 会随每次页面加载一同送出。优化它们能减少浏览器要解析的标记和要下载的字节，而这正是用户最先看到的资源。

  2. 图标雪碧图

    把几十个图标叠在一起的雪碧图会把每一个浪费的字节成倍放大。但请先打开「保留 ID」：把图标取出来用的 <use> 写在你的页面里、而不在文件里，不打开的话优化器没有理由认为任何一个 symbol 还有用。

  3. CSS 与 Data URI

    当 SVG 作为背景图或 Data URI 嵌入时，每个字符都要紧，而且无法单独 gzip。更小的源码是你唯一能用的杠杆。

  4. 设计到代码的交付

    直接从 Figma、Illustrator 或 Sketch 导出的文件杂项最多。在它们进入仓库之前先过一遍这里，让你的组件从干净的标记起步。

延伸阅读

需要的不是压缩而是从头生成 SVG？可以用SVG 背景图案生成器来生成；当图标要用作浏览器标签页图标时，再用Favicon 网站图标生成器把它变成所需的各种尺寸。

SVG 的体积到底花在哪

优化 SVG 不等同于 gzip 压缩，也不是混淆。它移除浏览器不需要的标记，同时让渲染出的图像保持一致。下面是被删掉的东西，以及为什么删掉是安全的。

  1. 编辑器元数据与注释

    设计工具会嵌入生成器注释、XML 声明、私有命名空间，以及作为 id 存在的图层名。这些都到不了渲染出的图像，所以全部移除——除了你选择保留的真正注释。唯独 id 要多想一层：渲染器看不见它们，但文件之外的样式表、脚本或雪碧图很可能正靠它们定位。

  2. 包裹分组与空节点

    导出常把一个形状包进一层甚至多层不带 transform 或样式的 <g> 里。这些会被折叠进子元素，真正空的容器和定义则被彻底删除。

  3. 过高精度的数字

    写成 16.00000 的坐标和 16 意思一样，13.847221 在屏幕上很少需要多于两三位小数。对路径和坐标数据取整，通常是图标里单项最大的收益来源。

  4. 长格式颜色与默认值

    #FFFFFF 这样的六位十六进制会缩成 #fff 或关键字，而被设成默认值的属性会被移除，因为渲染器本来就默认如此。

  5. 紧凑的路径数据

    路径的 d 属性可以用相对命令、合并段落、去掉分隔符来改写，用少得多的字符表达完全相同的曲线。

  6. 为什么 gzip 才是关键数字

    服务器发送 SVG 时会用 gzip 或 brotli 压缩，它们本就会折叠重复的空白。优化仍然有用，因为它移除压缩无法处理的部分，并把更干净的输入交给压缩器，但真正的收益要看 gzip 体积，而不是原始字节。

使用建议

让优化后的 SVG 既小又不失真的习惯。

  • 优化后一定要看预览，尤其是调低精度时，也要读一读工具列在输出下方的提示。取整是激进设置可能悄悄扭曲曲线的地方；而被删掉的 id，则是预览根本显示不出来的那种破坏。
  • 按 gzip 体积判断收益，因为那才是服务器实际传输的量。原始体积上很大的节省，套上传输压缩后可能所剩无几。
  • 当 SVG 需要随容器缩放时移除宽高，但对必须有固定固有尺寸的图像（如邮件或某些社交嵌入）则保留它们。
  • 保留 viewBox。它才是 SVG 能干净缩放的关键，本工具默认保留它。不要为了几个字节而删掉它。
  • 只要这个 SVG 是雪碧图、被外部样式表定制、或带着 aria-labelledby，就打开「保留 ID」。代价是几个百分点，换回的是默认预设无从知晓的那些引用。
  • 把优化作为构建或交付步骤并提交结果，但可编辑的源文件留在设计工具里。优化后的路径数据不适合手动编辑。

边界与注意事项

这个工具做什么，又把什么留给其他步骤。

  • 它优化单个 SVG 文档。不构建雪碧图，不打包被引用的文件，也不内联外部图像和字体。
  • 它不会把 SVG 栅格化成 PNG，也不会在格式之间转换。需要位图时，请配合图片格式转换工具使用。
  • SVG 内部的脚本和交互会被保留但不会被分析，也绝不会被执行：预览把每个文件都当作图片渲染，所以里面的东西在这里跑不起来。优化针对的是图形，而非内嵌的 JavaScript 行为。
  • 无法解析的畸形文档会被报告而不是修复，所以严重损坏的输入不会产出残缺的输出。

常见问题

关于优化 SVG 的常见问题——它改变什么，以及何时该用。

优化会改变我的 SVG 外观吗？

用默认设置不会。优化器只移除浏览器不渲染的标记，并把值改写成意义相同的更短写法，所以图像一致。唯一要留意的是「精度」控制：坐标取整过头可能悄悄扭曲细节，这正是并排预览存在的原因。一边看预览一边调低精度，在任何东西开始模糊之前停下即可。

优化和给 SVG 做 gzip 有什么区别？

两者是配合关系。优化编辑的是 SVG 标记本身，移除压缩器无从判断是否多余的元数据、空分组和过高精度的数字。gzip 或 brotli 随后压缩你发送的一切，在传输中折叠重复。两者都要：先优化以获得最干净的输入，再让服务器为传输压缩。真正的收益看这里显示的 gzip 数字。

我该移除 width 和 height 属性吗？

取决于 SVG 怎么用。移除它们并保留 viewBox，能让 SVG 随所在容器自由缩放，这通常正是内联图标和插画想要的。当图像需要固定的固有尺寸时保留它们，例如某些会忽略 viewBox 的邮件客户端或社交嵌入。无论哪种，工具都始终保留 viewBox。

我的 SVG 能小多少？

完全取决于它是怎么导出的。直接来自 Figma、Illustrator 或 Sketch 的文件余量最多，原始体积常能减掉三分之一到三分之二，而已经优化过的图标可能只削掉一点。套上 gzip 后百分比会缩小，因为压缩本就回收了大部分空白，这也是 gzip 数字更诚实的原因。

viewBox 安全吗？我听说删掉它会破坏缩放。

在这里是安全的。viewBox 才是让 SVG 与分辨率无关的关键，所以本工具默认保留它、绝不删除。只有固定的 width 和 height 属性是可选移除的，而那样做实际上会改善缩放而非损害它。

带渐变、滤镜或动画的 SVG 能优化吗？

可以。渐变、滤镜、裁剪路径、蒙版以及 SMIL 或 CSS 动画都会被读取并保留，被文件内部引用的定义会连同那处引用一起保住。要注意的是，这类 id 通常会被重命名成 a 这样的短名——在文件内部看不出差别，但当你把好几个优化过的 SVG 内联到同一个页面、或者从文件外部按 id 定位时就有影响。打开「保留 ID」即可保持原名。

我的雪碧图为什么优化完变成空的了？

因为同一个文件里没人用到的 <symbol> 在优化器看来就是死重量，而图标雪碧图恰恰就是由这种东西组成的：把图标取出来用的 <use> 写在你的页面里，不在这张图里。打开「保留 ID」，每个 symbol 连同它的 id 都会完整留下。工具也会把这种情况列在输出下方，而不是让「节省 100%」看起来像一场胜利。

优化会不会弄坏定位我 SVG 的 CSS 或 JavaScript？

用默认设置有可能。文件内部无人引用的 id 会被删掉，被引用的会被重命名成短名，于是 #logo-mark { fill: red } 这样的规则、或按这个 id 做的 querySelector 就不再命中。打开「保留 ID」，所有 id 都会原样保留。工具也会把某一遍处理之后指向空处的引用逐条列出，包括目标丢了 id 的 aria-labelledby。

我的 SVG 会被上传到什么地方吗？

不会。一切都在你的浏览器里运行。你粘贴的 SVG、上传的任何文件以及结果都在本地处理，绝不传输或存储，关闭标签页即刻消失，所以即便是私有 Logo 和未发布的品牌资产也很安全。预览把每个 SVG 都当作图片渲染，这也意味着引用了远程 URL 的文件在这里根本没机会去请求它。

更多相关工具

继续探索数据与格式工具集的其余部分。