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