跳到主要内容

免费 SVG 优化与压缩工具

清除元数据、合并空白并四舍五入小数,大幅缩小 SVG 文件体积——通常可缩减 30–70%。可视化预览确保效果不变。

加载后可离线使用

将文件拖放到此处,或点击浏览

SVG · 在你的设备上处理

或按 Ctrl+V 从剪贴板粘贴

浏览文件
— 或在下方粘贴 SVG —

你的文件永远不会离开你的设备。所有处理都在你的浏览器中本地进行。

常见用途

  • 优化生产 SVG 图标在部署前从图标 SVG 中去除不必要的元数据 — 典型减少 50-80%。
  • 优化品牌徽标 SVG减少 SVG 徽标文件大小以加快网站加载,无需牺牲质量。
  • 优化插图和 Hero SVG对于较大的插图 (Hero、装饰图形),优化可以节省 30-70% 的文件大小。
  • 减少 JavaScript Bundle 大小当 SVG 作为 React 组件导入或内联在代码中时,优化它们会缩小你的 JS bundle。
  • 清理 Figma / Sketch SVG 导出Figma 和 Sketch SVG 导出包含大量元数据。在生产中使用前将其去除。

工作原理

此工具使用完全在你的浏览器中运行的手写优化器减小 SVG 文件大小——没有库、没有服务器。它结合两轮处理:使用浏览器内置的 DOMParser/XMLSerializer 进行属性级的精度处理,并使用针对性的正则替换去除注释、元数据和折叠空白。

  1. 1
    DOMParser 清理 SVG
    在任何优化之前,浏览器的 DOMParser 将 SVG 作为 XML 读取并遍历每个元素。script 标签、事件处理程序(任何 on* 属性)、动画元素和外部 URL 引用会被无条件移除——无论你选择哪些优化选项,这一步都会执行。
  2. 2
    基于 DOM 的小数舍入
    如果启用小数舍入,优化器会第二次遍历解析后的 DOM,只对已知的数值属性(path d 数据、坐标、transform 值、描边宽度等)进行舍入,使用的正则能匹配单个浮点数,而不会破坏 .5.5 这样拼接在一起的路径值。
  3. 3
    正则处理清理序列化后的标记
    XMLSerializer 生成规范化的 XML,然后针对性的字符串替换会去除 HTML 注释、Inkscape/Sodipodi 编辑器元数据、XML 声明、多余的默认属性(如 version="1.1")以及标签间的空白——每一轮处理范围都很窄,绝不会触及文本节点内容。
  4. 4
    Gzip 大小与导出格式
    浏览器的 CompressionStream API 会计算输入和输出的真实 gzip 大小,因为这才是决定网络传输成本的实际因素。优化后的 SVG 可以下载、复制为原始 SVG、转换为适用于 React JSX 的驼峰式属性,或编码为 CSS data URI——所有转换都在本地进行。

你的 SVG 完全在浏览器标签页中读取和处理——文件数据绝不会离开你的设备。

相关工具

常见问题