SVG-Edit 在线编辑器

SVG 压缩优化:让文件小一个数量级

从设计软件导出的 SVG 经常几十 KB,真正有用的图形数据可能只有几 KB——其余全是编辑器塞进去的「行李」。上线前按下面四步清理,图标类文件通常能瘦 60%–90%。

1. 删行李:元数据与编辑器痕迹

用文本编辑器打开 SVG,删掉 <title>、<desc>、注释、data-name 之类的编辑器属性,以及空的 <g> 分组。隐藏图层(display="none")更是整层删掉——眼睛看不见,文件还在背着它。

2. 砍精度:小数点后留 1–2 位就够

d="M 123.456789 98.765432" 这种六位小数对屏幕毫无意义,坐标保留 1 位小数(图标)或 2 位(大插画)视觉上无差别,体积立刻降一截。在本站编辑器里导出前,也尽量把图形对齐到整数坐标。

3. 并同类:同色合并、描边转路径要慎重

填充色相同的多个 path 可以合并成一条(d 属性拼接)。反过来,「描边转路径」会生成大量锚点让文件变大——除非要交付印刷或字体环境不可控,能不转就不转。

4. 删锚点:曲线顺不顺看点数

一条波浪线 200 个锚点和 20 个锚点,肉眼几乎看不出区别。用路径编辑删掉冗余锚点(方法见路径编辑教程),这是压大插画最有效的一招。

验收标准:优化完把文件在编辑器里重新打开,缩放 400% 对照原图看轮廓——看不出差别,才算压得好。