SVG 优化压缩
从 Figma、Illustrator 或 Sketch 导出的 SVG 本身是规范的 XML，但里面塞满了浏览器根本不会渲染的东西：编辑器元数据、生成器注释、只包着一条路径的多余分组、精确到小数点后五位的坐标，还有写成长格式的颜色。这个工具一次粘贴就能把它们全部清掉。你贴进代码，立刻拿回体积最小且效果等价的 SVG，原始、优化后和 gzip 三个体积并排显示，还能并排预览优化前后的图形，确认形状丝毫未变。它就是构建流水线在用的 svgo 引擎，完全在你的浏览器里运行，粘贴的内容绝不离开这个标签页。
- 用的就是构建流水线在用的 svgo 引擎，把 SVG 解析成树再套用几十项安全变换，而不是简单地按文本切割
- 原始、优化后和 gzip 三个体积并排显示，让你按服务器实际发送的量来判断效果，而不是看原始字节数
- 在棋盘格背景上并排渲染优化前后的 SVG，让你一眼就能确认优化没有破坏图形
- 完全在你的浏览器里运行，你粘贴的 SVG（包括未发布的 Logo 和图标）都留在本机，关闭标签页即刻消失
功能简介
一个 SVG 优化器值不值得用，看两点：输出可不可信，收益看不看得见。这个工具正是围绕两者打造——压得准、可上线，旁边还有数字和预览证明它是安全的。
- 01
基于树的优化
先把 SVG 解析成真正的元素树再动手，元数据、空分组、多余属性都被清掉，而图形保持完全一致。没有脆弱的查找替换，不会因为一个渐变或嵌套 transform 而出错。
- 02
几十项安全变换
编辑器杂项、XML 声明和生成器注释被移除，颜色被缩短，等于默认值的属性被删掉，路径数据被改写成更紧凑的写法。每一项变换都以不改变渲染结果为前提挑选。
- 03
可调节的精度控制
导出时精确到小数点后五位的坐标几乎从不需要。把它们向下取整以缩小路径数据，再用并排预览，在细节开始模糊的那一刻停下来。
- 04
面向响应式的输出
可选择去掉 width 和 height 属性，让 SVG 继承所在容器的尺寸——这是图标和内联插画需要自由缩放时的常见做法。
- 05
可信的体积拆解
原始、优化后和 gzip 体积随编辑实时更新，旁边是精确的节省百分比。gzip 那个数字才对应真正在网络上传输的量。
- 06
上线前先亲眼看
把输出切到「预览」，优化前后的 SVG 会在棋盘格上一同渲染，破损的裁剪路径或丢失的填充在你复制结果之前就一目了然。
如何使用
几步之内，把臃肿的编辑器导出变成精简、可上线的 SVG，全程都能看到节省和预览。
- 01
把 SVG 粘贴进输入面板，或用「上传」直接从磁盘载入一个 .svg 文件。
- 02
选择你的选项。想要最小结果就保持「多轮优化」开启，一边看预览一边调低「精度」，需要图标随容器缩放时打开「移除宽高」。
- 03
把输出切到「预览」，确认优化后的 SVG 渲染得和原始完全一致，再看体积拆解了解收益。
- 04
复制优化后的 SVG，或下载为 .svg 文件，然后放进你的标记、雪碧图或组件里。
功能说明
这些细节让输出可以放心上线、值得快速信任。
- 基于 svgo——标准的 SVG 优化器，在解析后的树上运行而非文本替换，用的就是构建工具默认的那套预设。
- gzip 体积用你浏览器内置的压缩来测量，所以这个数字反映的是真实服务器会发送的量。
- 优化随编辑实时运行，无需点按钮，改动选项到看到新体积与预览之间没有延迟。
- 解析错误会连同信息就地显示，而不是悄悄产出破损或空白的输出。
- 不上传、不记录。你粘贴的 SVG（包括未发布的品牌资产）都留在浏览器里，关闭标签页即刻消失。
适合哪些场景
把 SVG 精简到只剩本质，这些场景最划算。
-
内联图标与 Logo
直接嵌在 HTML 或组件里的 SVG 会随每次页面加载一同送出。优化它们能减少浏览器要解析的标记和要下载的字节，而这正是用户最先看到的资源。
-
图标雪碧图
把几十个图标叠在一起的雪碧图会把每一个浪费的字节成倍放大。在每个符号进入雪碧图之前先优化，能让合并后的文件保持精简。
-
CSS 与 Data URI
当 SVG 作为背景图或 Data URI 嵌入时，每个字符都要紧，而且无法单独 gzip。更小的源码是你唯一能用的杠杆。
-
设计到代码的交付
直接从 Figma、Illustrator 或 Sketch 导出的文件杂项最多。在它们进入仓库之前先过一遍这里，让你的组件从干净的标记起步。
延伸阅读
需要的不是压缩而是从头生成 SVG？可以用SVG 背景图案生成器 来生成；当图标要用作浏览器标签页图标时，再用Favicon 网站图标生成器 把它变成所需的各种尺寸。
SVG 的体积到底花在哪
优化 SVG 不等同于 gzip 压缩，也不是混淆。它移除浏览器不需要的标记，同时让渲染出的图像保持一致。下面是被删掉的东西，以及为什么删掉是安全的。
-
编辑器元数据与注释
设计工具会嵌入生成器注释、XML 声明、私有命名空间，以及作为 id 存在的图层名。这些都到不了渲染出的图像，所以全部移除——除了你选择保留的真正注释。
-
包裹分组与空节点
导出常把一个形状包进一层甚至多层不带 transform 或样式的 <g> 里。这些会被折叠进子元素，真正空的容器和定义则被彻底删除。
-
过高精度的数字
写成 16.00000 的坐标和 16 意思一样，13.847221 在屏幕上很少需要多于两三位小数。对路径和坐标数据取整，通常是图标里单项最大的收益来源。
-
长格式颜色与默认值
#FFFFFF 这样的六位十六进制会缩成 #fff 或关键字，而被设成默认值的属性会被移除，因为渲染器本来就默认如此。
-
紧凑的路径数据
路径的 d 属性可以用相对命令、合并段落、去掉分隔符来改写，用少得多的字符表达完全相同的曲线。
-
为什么 gzip 才是关键数字
服务器发送 SVG 时会用 gzip 或 brotli 压缩，它们本就会折叠重复的空白。优化仍然有用，因为它移除压缩无法处理的部分，并把更干净的输入交给压缩器，但真正的收益要看 gzip 体积，而不是原始字节。
使用建议
让优化后的 SVG 既小又不失真的习惯。
- 优化后一定要看预览，尤其是调低精度时。取整正是激进设置可能悄悄扭曲曲线或错位形状的地方。
- 按 gzip 体积判断收益，因为那才是服务器实际传输的量。原始体积上很大的节省，套上传输压缩后可能所剩无几。
- 当 SVG 需要随容器缩放时移除宽高，但对必须有固定固有尺寸的图像（如邮件或某些社交嵌入）则保留它们。
- 保留 viewBox。它才是 SVG 能干净缩放的关键，本工具默认保留它。不要为了几个字节而删掉它。
- 把优化作为构建或交付步骤并提交结果，但可编辑的源文件留在设计工具里。优化后的路径数据不适合手动编辑。
边界与注意事项
这个工具做什么，又把什么留给其他步骤。
- 它优化单个 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 动画都会被读取并保留。优化器理解 SVG 结构，所以被引用的定义会保持完整，只要有东西指向它们，其 id 就会被保留。当文件重度依赖这类特性时，请务必用预览确认。
我的 SVG 会被上传到什么地方吗？
不会。一切都在你的浏览器里运行。你粘贴的 SVG、上传的任何文件以及结果都在本地处理，绝不传输或存储，关闭标签页即刻消失，所以即便是私有 Logo 和未发布的品牌资产也很安全。