SVG Data URI 是将 SVG 矢量图形编码为 data:image/svg+xml,... 格式的字符串，可以直接嵌入到 CSS 的 background-image、mask-image 等属性中。

优势：减少 HTTP 请求数量，图标与样式一同加载；避免额外的图片文件管理；特别适合小图标、loading 动画、装饰元素等场景。内联的 SVG 还可以通过 CSS 变量动态调整颜色（使用 currentColor）。

URL 编码（推荐）：使用 encodeURIComponent() 对 SVG 字符串进行编码，体积更小（接近原始 SVG 大小），保留了 SVG 的文本可读性（编码后仍可辨识部分内容）。适合绝大多数场景。

Base64 编码：将 SVG 转为 Base64 字符串，体积会增大约 33%。优点是所有字符都是 ASCII 安全字符，兼容性极好，某些老旧浏览器或特殊场景下更稳定。

建议：优先使用 URL 编码方式，它是现代浏览器的最佳实践，体积更小。如果遇到兼容性问题再切换为 Base64。

在 Data URI 的 URL 编码方式中，以下字符必须被编码：
# → %23（在 CSS url() 中 # 会被解释为片段标识符）
% → %25
" → %22（避免与 CSS 引号冲突）
< → %3C、> → %3E
空格 → %20
本工具使用 encodeURIComponent() 自动处理所有这些字符，确保 Data URI 在 CSS 中的安全性。

SVG Data URI 在所有现代浏览器中都有良好的支持：Chrome、Firefox、Safari、Edge 均完美兼容。IE9+ 也支持 SVG Data URI，但 IE 对某些复杂 SVG 特性支持有限。

注意事项：在 CSS 中使用时，避免在 url() 内使用未编码的 # 字符；Base64 编码的 Data URI 在所有浏览器中都具有最佳兼容性。对于移动端浏览器（iOS Safari、Android Chrome），SVG Data URI 完全可用。

移除 XML 声明：<?xml version="1.0"?> 在 Data URI 中是不必要的，移除可减少约 40 字节。
移除注释：SVG 中的 <!-- 注释 --> 在渲染时无作用，移除它们减小体积。
压缩空白：多余的空格、换行、缩进在 Data URI 中只会增加体积，压缩后可减少 10%-30% 的大小。
缩短颜色值：将 #ffffff 替换为 #fff、#000000 替换为 #000 等，进一步减小体积。
移除 metadata：<metadata> 标签通常包含编辑器信息，在 Web 使用中无实际作用。

1. background-image：
.icon { background-image: url("data:image/svg+xml,%3Csvg..."); }

2. mask-image（图标遮罩）：
.mask-icon { mask-image: url("data:image/svg+xml,..."); -webkit-mask-image: url("data:image/svg+xml,..."); background: currentColor; }

3. 伪元素 content：
.item::before { content: url("data:image/svg+xml,..."); }

实用技巧：在 SVG 中使用 currentColor 作为 fill/stroke 颜色，可以让 Data URI 图标继承 CSS 的 color 属性，实现动态变色。

Data URI 没有硬性的大小限制，但建议用于较小的 SVG（通常 < 5KB 优化后）。过大的 Data URI 会导致 CSS 文件体积膨胀，影响加载性能。

对于复杂的大型 SVG（如插画、复杂图标集），建议使用独立的 .svg 文件并通过 <img> 标签或 CSS url() 引用外部文件，利用浏览器缓存机制。Data URI 最适合小图标、UI 元素、loading 动画等轻量级图形。

1. 本工具实时预览：右侧预览区域会直接渲染 Data URI，如果 SVG 显示正常则说明转换正确。
2. 浏览器地址栏测试：将完整的 Data URI 粘贴到浏览器地址栏并回车，浏览器会直接渲染该 SVG。
3. CSS 测试：复制 CSS 格式的输出，在浏览器的开发者工具中应用到任意元素上，查看效果。
4. 下载测试：点击"下载测试"按钮，将 Data URI 保存为 HTML 文件并在浏览器中打开验证。