在线SVG清理工具

优化和清理从Figma、Adobe Illustrator或Inkscape导出的SVG。删除元数据、不必要的属性和空组,获得生产就绪的SVG。

工具工作室

想把这个工具添加到你的网站吗?

为 WordPress、Notion 或你自己的网站自定义配色和深色模式。

常见问题

我可以粘贴包含嵌入SVG的完整HTML页面吗?

可以。清理工具会检测HTML内的SVG元素并仅提取该块进行处理。如果直接粘贴SVG片段也可以工作。

它适用于Illustrator SVG吗?

可以。Illustrator导出的SVG包含XML声明、元数据和清理工具会删除的专有命名空间。结果是与所有现代浏览器兼容的SVG。

清理和最小化有什么区别?

清理删除不必要的属性和标签,但保持缩进格式以便您可以读取和编辑代码。最小化还会将所有内容折叠成一行,以最大化减少文件大小。

删除ID会损坏SVG吗?

仅当SVG中的元素通过ID引用另一个元素时,例如通过fill="url(#gradient)"。在这种情况下,禁用"删除ID"选项。之所以默认禁用,正是为了避免这个问题。

SVG代码会发送到任何服务器吗?

不会。所有处理都在您的浏览器中使用本地DOMParser和XMLSerializer API进行。代码永远不会离开您的设备。

# 来自Figma和Illustrator的干净代码SVG清理工具

粘贴从Figma、Adobe Illustrator或浏览器检查器导出的任何SVG,获得清洁、优化的矢量文件,准备投入生产。

# 为什么导出的SVG这么脏?

当您从Figma导出SVG时,您会获得一个充满仅在应用内有意义的属性的文件:data-namexml:space、对内部图层的引用和设计元数据。结果是比必要的大40-70%的SVG。

# 清理工具删除的内容

  • 编辑器元数据: Figma和Illustrator自动添加的metadatatitledesc标签。
  • Inkscape命名空间: 所有带有inkscape:sodipodi:前缀的元素。
  • 不必要的属性: xml:spaceversion、多余的xmlns:*和Figma data-*属性。
  • 空组: 从删除的图层中遗留的无内容<g>元素。
  • XML声明: 在HTML中嵌入SVG时不必要的<?xml version="1.0"?>声明和DOCTYPE。

参考文献