工具
指南

SVG 预览与精简

图片

在浏览器中直接预览 SVG 并移除编辑器冗余——注释、<metadata>、Inkscape 与 Sodipodi 命名空间、标签间空白。实时显示前后字节数与 viewBox 信息。不会上传任何数据。

100% 客户端 无后端

不获取远程 URL；请直接粘贴你的 JSON。

输入
输出
预览
·
视图框:

预览通过 <img> 标签渲染，SVG 内的任何脚本都不会执行。数据不会离开你的浏览器。

粘贴 SVG 即可预览并精简。
本页内容

什么是 SVG 查看器与压缩器？#

SVG 是网页上图标、logo、线条艺术的首选格式——任何尺寸都清晰、还能当文本编辑。但设计工具导出的 SVG 往往带一堆杂物：Inkscape 和 Sodipodi 的编辑器命名空间、<metadata> 块、作者注释，以及每个标签之间的空白。这些累赘把文件撑大，还让任何想读源码的人头疼。SVG 压缩器要做的，就是剥掉那些不影响渲染的部分、并告诉你省下了多少。

本页既是查看器也是压缩器。左边贴 SVG 源码，右边立刻看到渲染结果；切到 压缩 模式，跑一遍自研的清理流程——移除注释、metadata、编辑器命名空间、元素间空白——然后读出省了多少字节。预览是通过图片 data URI 渲染的，所以 SVG 里内嵌的任何脚本都不会执行——你可以放心地检视一个不可信的文件。

怎么使用#

  1. 把 SVG 贴进左侧 输入 框，或点 示例 载入一个小例子。
  2. 输出 框和预览会立刻刷新。工具条默认在 压缩，所以输出就是清理过、更小的 SVG。
  3. 想让输出显示原始未动的源码时（比如拿来和压缩版对比），切到 还原。
  4. 读下方的统计面板：
    • 压缩前 / 压缩后 / 节省 —— 输入对输出的 UTF-8 字节大小、以及节省的百分比。
    • 移除摘要 —— 删掉了多少注释、metadata 块、编辑器元素、编辑器属性、空白节点。
    • viewBox —— 从根 <svg> 读出的 width/height/viewBox 几何信息，方便一眼确认画板尺寸。
  5. 在输出框用 复制 或 下载 取走压缩后的 SVG。点 清空 把两边都清掉。

主要特性#

  • 从零自研的真压缩器，不是 svgo。 svgo 是 Node 上的标准工具，但它依赖 Node 的 fs 和 path、在浏览器里跑不干净。本页自带一套树遍历，零服务端依赖就能工作。
  • 五类杂物一网打尽。 注释、<metadata> 块、Inkscape/Sodipodi 命名空间的元素和属性、元素间空白——每一项都计入并报告。
  • 文本相关的空白处理得当。 <text>、<tspan>、<title>、<desc>、<style>、<script> 内部的空白会保留，所以标签和内嵌 CSS 不会被压坏。
  • 预览安全。 渲染走的是带 data URI 的 <img>，浏览器把它当成不执行脚本的非脚本上下文——SVG 里内嵌的脚本不会跑。粘贴不可信文件也没风险。
  • 诚实的字节核算。 尺寸按 UTF-8 字节算（不是字符数），所以含中文或 emoji 的文件报的是真实上线体积。
  • 100% 本地。 解析和序列化都在浏览器里完成，SVG 绝不离开本页。

实例演示#

一份典型的 Inkscape 导出，开头往往是好几行编辑器命名空间声明加一个 <metadata> 块，真正的图在后面：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

贴进来，模式留在 压缩，输出就塌缩成：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

统计面板大致报告 压缩前约 520 字节、压缩后约 210 字节、节省约 60%，移除摘要显示删了 1 条注释、1 个 metadata 块、1 个编辑器属性（inkscape:connector-curvature）。预览里的对勾渲染得一模一样——影响画面的东西一点没动。

常见问题#

会执行 SVG 里内嵌的脚本吗？#

不会。预览是用 <img src="data:image/svg+xml;base64,…"> 渲染的，而通过 <img> 加载的图片属于非脚本上下文——浏览器不会执行其中 SVG 里的任何 <script>。所以拿来检视别人发的 SVG 是安全的。但源码里的 <script> 标签在压缩输出里会保留，至于它跑不跑，取决于你之后怎么嵌入这个 SVG。

为什么不直接用 svgo？#

在 Node 构建流水线里 svgo 是对的工具，但它依赖 Node 的 fs 和 path 模块、在浏览器标签页里跑不干净。本页的压缩器是一套自带、无 Node 依赖的树遍历，能完全在客户端跑——代价是不像 svgo 最深的那档优化那么激进。

我的文件省下来很少。#

本来就是手写的文件（没有编辑器命名空间、没有 metadata、没有注释）没什么可删的，省下来的可能只是百分之几的空白。压缩收益最大的是设计工具导出——Inkscape、Illustrator——杂物的来源本来就在那儿。

压缩会改变 SVG 的渲染效果吗？#

不会，至少对本工具移除的这几类不会：注释、metadata、编辑器命名空间、元素间空白都不带任何渲染语义。而文本类元素（<text>、<title>、<desc>、<style>、<script>）内部的空白会被刻意保留，因为在那些地方它可能是要紧的。