在浏览器本地一键清除 Adobe Illustrator、Figma 与 Inkscape 导出的冗余元数据、XML 注释、隐藏图层及过长坐标小数位,画质分毫不损。
或点击选择文件
基于 Adobe Illustrator、Figma 和 Inkscape 导出的原始矢量文件实测,直观展示清理前后的字节大小与代码变化。
移除了多达 21 KB 的 Adobe XMP 头部数据包、<i:pgf> 私有标签及未使用的 XML 命名空间,并将 4,200 多个路径坐标从 6 位小数四舍五入至 2 位,放大 400% 对比无任何视觉偏差。
一次拖入 24 个后台图标,自动合并冗余分组容器、剔除默认的 fill-opacity="1" 空属性并压缩 <style> 样式表,整体体积减少近三分之二。
彻底清除了所有 inkscape:* 与 sodipodi:* 编辑器私有属性,删去了设计师遗留的 14 个隐藏参考线图层,使网页端 DOM 解析耗时降低 68%。
Adobe Illustrator、Figma、Sketch 和 Inkscape 等设计软件在导出 SVG 时,为了保留二次编辑信息,会写入大量专有 XML 标签、长浮点数坐标和隐藏图层,导致生产环境体积严重膨胀。
将未经压缩的 SVG 直接内联到 HTML 中会导致网页体积暴增、DOM 节点数超标。剥离注释、元数据与无效定义后,可显著缩减 HTML 传输体积并加快首屏渲染。
原始 SVG 常带有 xmlns:xlink、xml:space 及固定编辑器 ID,直接粘入 JSX/TSX 容易引发编译报错或全局 ID 冲突。优化后的纯净 XML 代码可直接嵌入前端工程。
研发团队在打包整套产品图标时,可直接将数十个 SVG 拖入浏览器一次性完成瘦身,全程在本地内存运行,绝不将未公开的 UI 资产上传至外部服务器。
为了获得最佳压缩率并确保矢量图形渲染正常,请确认您的输入文件符合以下规范:
支持由 Illustrator、Figma、Sketch、Affinity Designer 或 Inkscape 导出的标准 XML 格式 .svg 文件,可一次选择数十个文件同时处理。
文件内部应由 <path>、<circle>、<rect> 等矢量节点构成。若 SVG 内包裹了 <image xlink:href="data:image/png;base64,..."> 位图,代码优化无法压缩其中的位图数据。
如果设计稿包含特殊艺术字体,请在导出 SVG 前在设计软件中执行“创建轮廓(转曲)”,避免因用户电脑缺少对应字体导致文字变形。
请确保根级 <svg> 标签带有有效的 viewBox="0 0 W H" 属性,以便清理冗余宽高属性后依然能在各类屏幕下保持正确比例缩放。
在工作区下方查看 8 个优化选项(移除注释、移除元数据、移除空属性、压缩样式、移除未使用的命名空间、四舍五入数字、移除编辑器数据、移除隐藏元素),默认全选以实现最大瘦身效果。
将一个或多个 .svg 文件拖入绿色虚线上传框,或点击“加载未优化的示例 SVG”按钮,立即体验 34.8 KB 臃肿代码的秒级清理过程。
浏览器本地引擎会在数毫秒内完成解析与重构,并在结果列表中清晰列出每个文件的原始体积、优化后体积及节省百分比。
点击对应文件右侧的下载按钮保存精简后的 .svg 文件,即可直接部署到网站静态资源目录或前端组件库中。
剥离了非渲染冗余数据的轻量级 SVG 文件,可直接投入以下研发与设计流程:
将精简后的 <svg> 标签直接粘贴到 JSX 或 Vue 模板中,配合 currentColor 和 Tailwind CSS 类名即可动态控制图标颜色与悬停交互。
体积缩减 70% 后的 SVG 代码在转换为 CSS background-image 的 data:image/svg+xml 字符串时更短,能显著减小样式表文件体积。
清除专有命名空间和异常属性后,再送入本网站的“SVG 转 PNG”或“图片转 ICO 图标生成器”,可避免复杂 XML 属性引发的渲染偏移。
虽然全选 8 项清理规则对 95% 以上的静态图标与插画完全安全,但在以下特殊技术场景下,请按提示调整勾选项:
勾选“移除隐藏元素”会删去带有 display="none" 或 opacity="0" 的节点,而外部 CSS 动画或 GSAP 脚本可能正需要通过控制这些节点来实现动态显现。
在优化用于网页交互动画的 SVG 前,请先取消勾选“移除隐藏元素”和“移除编辑器数据”,完整保留所有 DOM 节点结构。
当整个图标的坐标范围仅在 0 到 12 之间时,对路径控制点执行“四舍五入数字”会产生相对较大的坐标偏移,导致贝塞尔曲线不够平滑。
处理 16×16 以下极小 viewBox 的精细图标时,请取消勾选“四舍五入数字”,或在设计软件中将画布等比放大至 24×24 或 512×512 后再导出。
部分用户在设计软件中直接置入 PNG/JPG 截图并另存为 SVG,此时文件 99% 的体积是 Base64 编码字符串而非矢量路径,XML 清理只能减少不到 1% 的体积。
请先提取其中的位图并使用本站的“PNG 在线压缩工具”进行色彩量化瘦身,或在 Illustrator 中对位图执行“图像描摹”转为真正的矢量路径。
在矢量图处理流程中,不同工具承担完全不同的角色,请根据您的目标选择对应工具:
| 对比维度 | SVG 优化器(本工具) | SVG 在线查看器与代码检查 | SVG 转 PNG / 批量转换器 |
|---|---|---|---|
| 核心用途 | 剔除冗余 XML 代码与元数据,缩减 .svg 文件字节大小 | 实时预览透明网格渲染效果、检查 viewBox 并格式化源码 | 将矢量 .svg 光栅化渲染为指定像素尺寸的 PNG/JPG/WebP 位图 |
| 输出格式 | 体积更小的标准 .svg 矢量文件(保持无限放大不失真) | 美化缩进后的可读 XML 代码与尺寸诊断信息 | .png / .jpg / .webp 像素图片(或 .zip 压缩包) |
| 对文件体积的影响 | 无损削减 40%–80% 源码体积 | 不压缩体积,重点在于展开压缩代码以便人工阅读调试 | 取决于导出的像素分辨率(如 1024px 或 4K) |
| 最佳适用场景 | 前端上线前压缩图标库、插画及内联 SVG 代码 | 排查 SVG 显示不全、黑底看不清、viewBox 裁切异常 | 需要将矢量 Logo 上传至不支持 SVG 的文档、电商后台或社交媒体 |
完全不会。SVG 是基于数学公式的矢量图形。本工具清除的是 XML 注释、设计软件写入的私有历史记录(如 Adobe XMP 数据)以及未使用的命名空间,不会把矢量转成位图。精简后的 SVG 依然支持无限放大且边缘绝对锐利。
通常有两个原因:第一,该 SVG 文件此前已经通过 SVGO 或构建工具压缩过,内部没有多余空格与元数据;第二,该 SVG 内部包含内嵌的 Base64 位图(<image> 标签)。您可以先用“SVG 查看器”打开代码检查是否含有超长的 base64 字符串。
这通常是因为原图中包含被标记为隐藏属性或特殊空属性的图层。只需在“优化选项”中取消勾选“移除隐藏元素”和“移除空属性”,然后重新拖入原文件即可恢复正常。
绝对安全。本工具的所有 XML 解析、正则清理与坐标四舍五入运算 100% 在您的浏览器本地通过 JavaScript 完成,文件数据全程不会离开您的电脑,断网状态下同样可以正常压缩。
支持。您可以同时选中数十个甚至上百个 .svg 文件直接拖入上传区域,系统会逐一生成原文件大小、优化后大小、压缩率对比以及独立的下载按钮。
每个工具专注解决一个具体需求,点击下方卡片可切换至对应工具页面。
在透明网格、深浅背景上实时预览 SVG,检查 viewBox 与真实尺寸属性,格式化并复制 XML 源码。
将矢量 SVG 无损转换为透明底 PNG,支持自定义宽高像素(px)、4倍超清放大及 300 DPI 印刷元数据写入。
一次拖入数十或数百个 SVG 图标文件,批量导出为 PNG、JPG 或 WebP 并自动打包为 ZIP 下载。
上传一张高清图,一键生成包含多尺寸 favicon.ico、Apple Touch Icon 及 Android/iOS 应用图标的完整压缩包。