Softonic

压缩 SVG 代码

步 1 / 2
下一步

压缩 SVG 会把带缩进、便于阅读的标记转换为一行紧凑的代码，浏览器渲染效果相同。粘贴代码，运行压缩工具，复制一个可直接用于样式表、模板或组件文件的版本。

如何压缩 SVG 代码

  1. 1

    粘贴标记

    把完整的 svg 元素（包括开始和结束标签）粘贴到 SVG 源代码框中。

  2. 2

    选择要删除的内容

    保持注释、元数据、空白和 doctype 处于勾选状态，可获得最小的输出。

  3. 3

    选择小数位数

    默认的 2 位适合大多数图标。如果压缩后曲线看起来不对，可以提高到 3 位。

  4. 4

    压缩并复制

    点击“下一步”，再点击“压缩”，然后使用结果框上的“复制”按钮。

压缩工具对代码做了什么

该工具按固定顺序处理 SVG 的文本：先删除 XML 声明和 doctype，再删除注释，然后删除元数据、title 和 description 元素，接着对小数进行舍入，最后合并空白。任何连续的空格、制表符和换行都会变成一个空格，闭合标签与下一个开始标签之间的空格会被去掉，因此结果是一行。

前后对比

输入，126 字节：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

使用默认设置的输出，97 字节（节省 23%）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

注意 8.000 变成了 8，3.500 变成了 3.5。舍入之后，末尾的 0 会被去掉。

它不改动的内容

这是一个文本压缩工具，而不是完整的优化器。它保留属性名、ID、类、分组、transform 和路径命令。这是刻意的设计：被 CSS、脚本或渐变引用的 ID 会继续有效，而且如果你以后需要修改文件，文件结构依然清晰可辨。

需要注意的地方

  • 空白合并也适用于文本元素内部，因此连续多个空格的标签只会显示一个空格。
  • 舍入适用于每一个小数，包括属性中的版本号，例如 1.10 会变成 1.1。
  • 压缩后的代码很难阅读。请在版本控制中保留原始文件，只把压缩版本用于输出。

压缩后的快速检查

把压缩后的这一行粘贴到一个空白 HTML 文件中，并与原始文件一起在浏览器中打开。两者应当看起来完全一样。如果渐变、蒙版或裁剪路径失效，请检查是否有 ID 或引用被手动修改过，因为该工具本身不会重命名 ID。如果某个非常细微的部分位置有变化，请将小数精度提高到 3 位或更多，然后重新压缩。

结果的使用场景

单行 SVG 可以干净地粘贴到 HTML 文件、JSX 组件、data URI 或 CSS 背景规则中，而多行代码在这些场景下则需要转义。

常见问题

压缩 SVG 代码是去掉文本中不需要的字符。像服务器上的 gzip 这样的压缩，则是为了传输而打包文本。两者可以叠加使用，压缩后的文件在传输中还能再次压缩。

默认不会。ID、类和元素结构都会保留。只删除注释、元数据元素、doctype 和空白。

该工具不会格式化代码。把压缩后的文本放到任何带格式化功能的代码编辑器中，就能恢复缩进，但被删除的注释无法找回。

删除空白会去掉标签之间的换行。如果你想保留原始布局，请取消勾选空白选项。

相关工具

材质设计颜色选择器

浏览Material Design色板，单击即可将任意色号（50至A700）以HEX、RGB或 HSL 格式复制。

五线谱纸生成器

制作可打印的五线谱纸：空白五线谱、高音或低音谱号、钢琴大谱表或吉他六线谱。可设置每页数量、谱线间距、A4 或 Letter 纸张和页边距，并下载 PDF 或 SVG。

乐高风格马赛克制作器

将照片转换成每边 16、32、48 或 64 格的方形马赛克。预览近似颜色、统计 1×1 平板颗粒，并下载带编号的拼搭指南。

SVG 点阵生成器

生成可调整画布、间距、半径和颜色的 SVG 点阵图案。作为 CSS 背景使用前，请将复制的 SVG 编码为数据 URL。

条形码识别器

选择条形码图片，读取编码内容和条形码类型。支持 EAN-13、UPC-A 和 Code 128，并显示 EAN 和 UPC 的校验位结果。

菜单制作工具

在线制作单页餐厅菜单，可编辑分类、菜品、价格和颜色，支持实时预览、下载 SVG 和 PNG 以及浏览器打印。

此工具还提供其他语言版本

使用指南与应用场景