将 SVG 转换为 Data URI，用于 CSS 背景图，支持 URL 编码和 Base64 编码选项
格式转换
关于此工具
SVG 转 Data URI 是一款在线工具，可将 SVG 代码转换为 Data URI 字符串，用于在 CSS 和 HTML 中内嵌使用。它支持 URL 编码和 Base64 输出、可选 SVG 优化，并生成可直接使用的 CSS 代码——所有处理均在浏览器本地完成。
主要功能
- 将 SVG 转换为 URL 编码的 Data URI
- 将 SVG 转换为 Base64 编码的 Data URI
- 转换前进行 SVG 优化
- CSS background-image 输出格式
- HTML img src 和原始 Data URI 输出
- 实时转换与实时预览
使用场景
- 在 CSS 样式表中直接内嵌 SVG 图标
- 在 HTML 中内联 SVG 图像以提升性能
- 通过将 SVG 嵌入为 Data URI 减少 HTTP 请求
- 创建包含嵌入图像的便携式 HTML 文档
- 生成 SVG 背景的 CSS 代码片段
svg
data-uri
base64
embed
inline
常见问题
什么是 SVG 转 Data URI 转换器？
SVG 转 Data URI 转换器是一款在线格式转换工具，可将 SVG 代码转换为 Data URI 字符串，用于在 CSS 和 HTML 中内嵌使用。它支持 URL 编码和 Base64 编码，并提供 SVG 优化和可直接使用的 CSS 代码生成。
URL 编码和 Base64 有什么区别？
URL 编码的 Data URI 使用百分号编码表示特殊字符，输出较大但更易读。Base64 编码生成紧凑的二进制到文本表示，对于复杂 SVG 体积更小，但不可读。
工具会在转换前优化 SVG 吗？
是的，启用优化 SVG 选项后，工具会在生成 Data URI 之前移除 SVG 中不必要的空白、注释和空属性，从而减小输出体积。
我的 SVG 数据会发送到服务器吗？
不会。所有 SVG 转 Data URI 的转换完全在您的浏览器中进行。您的 SVG 代码不会被上传或传输到任何服务器，确保您的工作完全私密和安全。
我可以直接将输出用于 CSS 吗？
可以。工具生成可直接使用的 CSS background-image 代码片段。只需复制 CSS 输出并粘贴到样式表中，Data URI 即可作为有效的背景图像 URL 使用。