UTILS.
100% 浏览器内运行
🖼️

SVG 转 CSS / Data-URI 编码器

将 SVG 标记编码为 URL 编码或 base64 的 data URI,并附上可直接粘贴的 CSS background-image 和 <img> 代码行。可选择压缩。

— 输出将显示在这里 —
— 输出将显示在这里 —
— 输出将显示在这里 —

关于此工具

粘贴原始 SVG 标记,得到一个可直接放入 CSS 或 HTML 的 data URI。它会生成两种编码,一切都在你的浏览器中生成,因此不上传任何内容。

URL 编码输出会把双引号换成单引号,运行 encodeURIComponent,然后恢复几个安全字符(空格、冒号、斜杠、等号),以保持紧凑且易读。base64 输出会对 SVG 进行 UTF-8 编码并通过 btoa 处理,得到 data:image/svg+xml;base64,… 。字节对比会显示哪种编码更小;对于大多数图标,URL 编码形式获胜。

启用压缩可在编码前去除注释并折叠标签之间的空白。复制 background-image 行用于 CSS,或复制 <img src> 行用于 HTML。请注意,SVG 内部的引号会被规范化为单引号,以便 data URI 能安全地被双引号包裹。

常见问题

URL 编码还是 base64——我该用哪个?
URL 编码通常更小且保持可读,这有助于调试。base64 更不透明但被普遍接受;这里的大小对比会告诉你哪种更小。
为什么我的双引号被改成了单引号?
属性引号被转换为单引号,以便整个 data URI 能放入双引号的 url("…") 或 src="…" 中而无需转义。两者在 SVG 中都是合法的。
压缩会改变 SVG 的外观吗?
不会。它只移除注释并折叠标签之间和内部的空白;渲染出的矢量图完全相同,只是更小。
我的 SVG 会被上传到任何地方吗?
不会。编码完全在你的浏览器中用 encodeURIComponent 和 btoa 运行;标记永远不会离开你的设备。

更多工具