在此运行 完全在你的浏览器里运行,不上传、不登录
SVG 转 Data URI
把 SVG 转成 URL 编码或 Base64 两种 data URI,并对比字节体积。
两种输出指向同一张图。URL 编码保持可读,Base64 在带引号的 CSS 值里更安全。
粘贴 SVG 文档
体积对比:
URL 编码 data URI
Base64 data URI
CSS background 用法
怎么用
- 把完整的 SVG 文档粘贴进输入框。
- 保持勾选清理选项,可在编码前移除注释并压缩多余空白。
- 点「转换」,两种输出会同时出现,并在每次编辑后自动更新。
- 对照输入框下方的体积数字,选择适合当前场景的那一种。
- 需要 background-image 规则时,直接复制已配好尺寸的 CSS 代码块。
常见用法
- 内联小图标 —— 为几个极小的图形省掉额外请求。
- 邮件与单文件页面 —— 在无法加载外部文件的环境里让图片照常显示。
- CSS 遮罩与光标 —— 提供一个不需要解析路径的图片值。
- 体积核算 —— 用真实数字在可读与紧凑两种形式之间取舍。
常见问题
问:哪种格式更小? 答:取决于源文件。Base64 每三个字节会变成四个字符,而 URL 编码只扩张 URL 里不安全的字符。状态栏同时列出两者体积,让你按实测而不是按习惯选择。
问:为什么 CSS 代码块用 Base64? 答:Base64 不含需要在带引号的 CSS 值里转义的字符,经过压缩工具与预处理器也不会变形。URL 编码同样可用,但其中的百分号在部分工具链里会被特殊处理。
问:带脚本的 SVG 能内联吗? 答:技术上可以,但浏览器不会在 background-image 或 img 这类图片上下文里执行脚本。脚本只有在 SVG 直接内联进文档时才会运行,这也是使用他人 SVG 前需要检查的原因之一。
你的数据留在这台设备上
SVG 转 Data URI 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理,不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录,也不用于分析统计。首次加载之后即使断网,这个页面照样能用。