Hoelee Tools 由 Hoelee Enterprise 制作

SVG 品牌清理工具：马来西亚 Shopee 与 Etsy 卖家用

把从 Illustrator、Inkscape、Figma 或 Canva 导出的 SVG 粘贴进来，拿回一份更小、格式合法的 SVG：元数据已去掉，图形本身完全不动，而且全程只在浏览器里完成，不会把品牌文件上传。

🔒 100% 浏览器内运行 · 零服务器上传

马来西亚规则与特殊情况

设计师导出的文件是图形外面包了一层编辑器的内部数据。Illustrator 会加 XML 头、生成器注释、Adobe 命名空间和元数据块；Inkscape 会加数千个 Sodipodi 和 Inkscape 命名空间属性，用来记它自己的图层、参考线和标签。这些东西不会改变任何一个像素。下表是引擎对真实导出文件清理后的结果：

编辑器写下的内容清理工具的做法
<?xml version="1.0" …?> 和 <!DOCTYPE …>去掉——输出只剩一份 <svg> 文档
<!-- Generator: Adobe Illustrator … -->删除（会在汇总里计数）
<metadata>、<title>、<desc>、<sodipodi:namedview>连同全部内容一起删除；只有关掉对应选项才会保留
inkscape:*、sodipodi:*、sketch:*、figma:*、adobe:*、i:* 属性；ns1:* 只在该前缀别处没人用时处理删除，并连同对应的 xmlns:* 声明一起——声明留着会让文档非法
根元素上的 width="1000.123456"去掉，让 viewBox 决定缩放；其它元素上的宽高保留
路径数据、几何与长度里的 123.4567按你选的小数位四舍五入，默认 2 位，用十进制字符串半向上舍入，所以 1.005 会变成 1.01，而不是浮点算法给出的 1.00
  • 只有已知数字属性才会被四舍五入。文字内容、id 与 class 的值、fill 与 stroke 颜色、style 字符串、href，以及 <text>、<style>、<script>、<foreignObject>、CDATA 或注释里面的任何东西都不碰——id="iphone13.5" 原样保留。
  • 数字按 SVG 允许的每一种写法读取：负数、1e-3 这样的指数、开头的 .5、结尾的 1.，以及 M0 0L10.005 10.005、matrix(...) 这样的复合列表。
  • 几何语义不变。清理后的文件除了去掉的元数据和你要求的四舍五入之外，渲染结果完全一样——不对图形做任何额外承诺。
  • 输出仍然格式合法。编辑器命名空间只有在连 xmlns: 声明一起去掉时才会被删；引号、括号与闭合标签都保留，工具也会把结果按 XML 解析校验一遍。
  • 拒绝有明确说法。空输入、超过 2 MB 的文字、没有 <svg> 根元素的文字，各有各的提示。

你粘贴的内容不会离开浏览器：本页是静态 JavaScript，没有任何网络请求。

处理前后

处理前

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.5.0, SVG Export Plug-In -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" width="1000.123456" height="800.98765" viewBox="0 0 1000 800">
  <metadata><rdf:RDF>creator data</rdf:RDF></metadata>
  <title>Logo</title>
  <desc>Storefront logo</desc>
  <sodipodi:namedview id="base" pagecolor="#ffffff" />
  <defs>
    <style>.cls{fill:#0071ce;stroke:#1d6f42}</style>
  </defs>
  <g inkscape:label="Layer 1" sodipodi:insensitive="true">
    <rect id="iphone13.5" x="10.005" y="20.0049" width="100.125" height="50.5" rx="4.4444" fill="#0071ce" stroke="#000000"/>
    <path d="M0 0 L 123.4567 78.9123 Z"/>
    <text x="11.5" y="22.1212" font-size="14.567">Kopi Ahmad 10.005</text>
  </g>
</svg>

处理后

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" viewBox="0 0 1000 800"><defs><style>.cls{fill:#0071ce;stroke:#1d6f42}</style></defs><g><rect id="iphone13.5" x="10.01" y="20" width="100.13" height="50.5" rx="4.44" fill="#0071ce" stroke="#000000"/><path d="M0 0 L 123.46 78.91 Z"/><text x="11.5" y="22.12" font-size="14.57">Kopi Ahmad 10.005</text></g></svg>

使用方法

  1. 从 Illustrator、Inkscape、Figma 或 Canva 把设计导出为 SVG，用文本编辑器打开 .svg 文件，复制全部内容。
  2. 把文字粘贴进“输入”，六个选项按默认即可，也可以逐个关掉，然后按“开始处理”。“输出”是清理后的 SVG；统计行显示清理前后的字节数、删掉的内容，以及找到的命名空间。
  3. 按“复制结果”存成 .svg 文件，用于打印模板或矢量软件；或者作为内联 <svg> 粘进网页 HTML 里——图形本身没有变。

常见问题

清理之后 logo 的样子会变吗？

不会。这个工具只删元数据、注释、编辑器命名空间和根元素的宽高，数字只有在你打开四舍五入时才处理。2 位小数时，一个路径点最多移动半个千分之一的用户单位，远小于一个可见像素。关掉四舍五入，几何数据逐字节不变。

为什么我导出的 SVG 里有 xmlns:inkscape 和 sodipodi 属性？

Inkscape 会把自己的图层、参考线和标签数据以命名空间属性写回 SVG，方便下次打开时恢复原样。浏览器会忽略它们，它们只会让文件变大，还会泄露编辑器的信息。连同对应的 xmlns 声明一起删掉，文档仍然合法。

为什么 1.005 清理后是 1.01，而不是 1.00？

1.005 没法在二进制浮点里精确表示，它实际存成 1.00499999999999989…，所以 1.005 乘 100 是 100.49999999999999，用浮点四舍五入会得到 1.00。清理工具直接按十进制字符串半向上舍入，2 位小数下 1.005 就是 1.01，测试套件专门锁定了这一例。

去掉根元素的 width 和 height 有什么用？

带 viewBox 的 SVG 会按它落进的盒子缩放。根元素上写死的宽高会盖过这一点，逼着它在任何地方都用导出尺寸，logo 要用到十二种尺寸时就错了。去掉宽高，控制权回到 viewBox，图形本身不变。

我的 SVG 会被上传吗？

不会。清理工具是浏览器里的静态 JavaScript：打开网络标签页会看到零请求。品牌文件就是你的商标形象，它不会离开这台机器。

相关工具