SVG 优化 / 预览

在线压缩 SVG 代码,转 Data URI,实时预览渲染效果

SVG 输入
🖼️
点击或拖拽 .svg 文件到此处
也支持直接粘贴 SVG 代码到下方
SVG 代码
清理选项
数字精度
2 位
实时预览
输入 SVG 后开始优化

工具介绍

什么是 SVG 优化

SVG(可缩放矢量图形)在传输和嵌入时常常包含大量冗余信息——XML 声明、DOCTYPE、编辑器生成的元数据(Inkscape、Adobe Illustrator、Sketch 等)、注释、空 group、默认值属性、过多数字精度。SVG 优化通过清理这些冗余内容,在保持视觉一致的前提下显著减小文件体积,常用于 Web 前端资源优化、图标库打包、邮件签名等场景。

优化选项说明

删除注释移除 <!-- ... --> 注释块
删除 XML 声明移除文件顶部的 <?xml ... ?>(内嵌 SVG 通常不需要)
删除 DOCTYPE移除 SVG 1.1 的 <!DOCTYPE ...> 声明
删除 metadata移除 <metadata> 标签(包含作者、版权、生成器信息)
删除编辑器信息移除 Inkscape、Illustrator、Sketch 等编辑器写入的命名空间属性和 data-* 标记
删除空 group移除 <g></g> 这样的空容器
删除默认属性移除 opacity="1"、fill-opacity="1" 等与默认值相同的属性
颜色短写#aabbcc → #abc、black → #000
压缩空白标签间多余空白、连续空格合并为单个,显著减小体积但牺牲可读性
数字精度坐标小数位数限制(-1 表示不限制)。保留 1~2 位通常视觉无变化

Data URI 用途

base64 编码

体积比原文大约增大 33%,但避免 URL 转义问题,适合 background-image: url(...) 等 CSS 场景。

URL 编码 (utf8)

仅对非 ASCII 字符转义,体积基本与原文持平,适合 background-image: url(...) 等 CSS 场景。

安全提示

预览采用 sandbox iframe 隔离,即使 SVG 含 <script> 等危险内容也不会执行。本工具完全在浏览器本地运行,不上传任何数据。