把 SVG 内联成 data URI,URL 编码(更小)或 base64,直接给出可粘的 CSS、HTML、纯 URI,并排体积对比,100% 浏览器本地。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
单个 .svg,上限 1 MB。任何字节都不出标签页。
这个工具能做什么
把 SVG 源码转成可内联的 data URI,直接粘进 CSS 的 `background-image`、HTML 的 `<img src>`,或任何接受 URL 的地方, 不发额外的 HTTP 请求,不依赖外部文件。粘贴源码或拖一个 `.svg` 文件进来,工具会同时给出两种编码:URL 编码(推荐,只转义少数 会在 `url(...)` 里出问题的字符,所以更小,而且仍然肉眼可读)和 传统的 base64。逐字节的体积对比告诉你你这个 SVG 用哪种编码更划算; 绝大多数图标和 logo,URL 编码比 base64 小 20-40%,因为它把尖括号、 字母、数字原样留着,而不是把每 3 字节硬撑成 4 字节。还有一个可选的 轻量清理,在编码前去掉注释、合并多余空白,但不碰路径和属性, 不会破坏渲染。三种输出一键复制:完整 CSS 规则、`<img>` 标签、 或纯 data URI。整个过程都在你的标签页里本地跑,SVG 不出设备, 编码器是纯 JavaScript,可以在 DevTools 里逐行审。
工具细节
- 输入
- 文件 + 文本
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
SVG 转 Data URI / CSS 背景 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把 CSS 背景图标内联,省掉一次请求
某个组件里用到一个小箭头或搜索图标,你不想为它单独放一个 `.svg` 文件(还要多走一趟 HTTP)。把 SVG 粘进来,保持 URL 编码选中,复制 CSS 输出,`background-image: url("data:image/svg+xml,...")`,直接粘进组件样式表。图标就烤 在 CSS 里,首屏直接渲染,没有图片缺失的闪烁,网络面板还少一个 请求。如果是一整套图标精灵,省下来的请求很可观。
在 HTML 邮件里嵌一个 logo
邮件客户端默认拦截外链图片,很多还会剥掉 `<style>` 块,所以 展示小矢量 logo 最稳的办法是给 `<img>` 标签一个内联 data URI。 粘 logo 的 SVG,把输出切到 HTML `<img>` 那种,复制。注意不少老 邮件客户端(Outlook 桌面版)根本不渲染 SVG,那种情况先用 svg-to-png-converter 转成位图,再用 base64-image-converter 把 PNG 内联。受众用的是现代网页邮箱(Gmail、Apple Mail,支持 SVG) 时才用这个工具。
给 Tailwind / CSS 自定义属性塞进矢量图
你想要一个可复用的 `--icon-check: url(...)` 自定义属性,这样任何 元素都能用 `background-image: var(--icon-check)` 拉同一个 SVG。 粘图标,复制纯 data URI 输出,赋值给 `:root` 里的变量。URL 编码 让这个值短到在 DevTools 里还能读得清,当你的 `:root` 里挤着十 几个图标变量时,这一点很重要。
提交前对比 URL 编码和 base64
你接手了一个样式表,前人把每个内联 SVG 都 base64 了,CSS 文件比 需要的更重。把每个 SVG 粘进来,看体积对比,它把 base64 字节数 和 URL 编码字节数并排列出来。典型图标你会看到 URL 编码赢 20-40%。 把 base64 的块换成 URL 编码形式,重新算一下 CSS 包体积,你就在 零视觉变化的前提下,给每次页面加载实打实减了字节。
拿 SVG 平铺图案当背景做原型
你在 Figma 里设计了一个可平铺的圆点或波浪图案,导出成一个小 SVG 瓦片。想把它当 CSS 背景预览,就得内联。粘瓦片,复制 CSS 规则,加上 `background-repeat: repeat`,不用走构建就能在浏览器 里调样子。图案定稿后,css-pattern-generator 能给你纯 CSS 的 替代方案,如果你不想内联,可以完全跳过 data URI。
常见踩坑
手写 data URI 时把 `#` 漏转了。带原始 `#` 的 `fill="#f00"` 会在井号处把 SVG 截断,因为浏览器把 `#` 后面的一切当成 URL 片段。这个工具会自动转成 `%23`,但如果你从别处复制的 data URI 渲染成空白,先查有没有没转的 `#`。
条件反射地什么都 base64。base64 固定多约 33%,而且输出没法读。SVG 本身就是文本,URL 编码几乎总是更小,还能在 DevTools 里直接看。只有当某个消费方明确处理不了 URL 编码的负载时,才用 base64。
把大插画内联。data URI 没法和承载它的文件分开缓存,所以一个 50 KB 的内联 SVG 会随每个引用它的页面重新下载。内联只留给小图标和 logo;大资源用外链文件。
忘了 `<img src="data:image/svg+xml,...">` 需要 SVG 自带 `xmlns`。和 HTML 里的内联 `<svg>` 不同,经 `<img>` 或 CSS `url()` 加载的 SVG 是当独立文档解析的,必须声明 `xmlns="http://www.w3.org/2000/svg"`,否则不渲染。
隐私说明
你粘贴或拖入的 SVG 完全在浏览器标签页里编码,URL 编码器和 base64 编码器都是纯 JavaScript,不发网络请求,不上传,不记录你转过什么。 打开 DevTools 的 Network 面板,请求数始终是 0。一个隐私提醒:这个 工具会把你的 SVG 源码镜像进可分享的 URL query string,这样"分享 链接"能复现同样的输入。SVG 源码通常较大,所以 URL 状态有上限, 过大的输入根本不会写进 URL。即便如此,如果你的 SVG 里嵌了不该出现 在截图里的东西(注释里的私有 API key、还没发布的品牌标),请手动 复制输出,别分享 URL。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。