SVG 转 Data URI 转换器

它是以 URL 形式写出的完整图像。字符串以 data:image/svg+xml 开头，其余部分就是代码本身，经过转义以便在 URL 中保持完整。由于图形随引用一起传递，浏览器拿到样式表时就已经拿到了图像：无需第二次请求，也不必为一个 600 字节的图标等待连接。

几乎在所有情况下都用 URL 编码。SVG 是文本，Base64 对它毫无益处：它把三个字节变成四个，无论内容如何都固定多出三分之一。百分号编码只对少数必须转义的字符各多付两个字节，结果通常只比源文件大 10% 到 25%。它在 diff 中依然可读，压缩效果也更好，因为 gzip 和 brotli 仍能识别重复的标签名，而 Base64 会把它们打乱。只有在流程会改写或重复转义百分号时，才使用 Base64。

几乎总是缺命名空间。在 HTML 页面中直接写 svg 元素时，解析器已经知道它是什么。而 Data URI 是作为独立文档加载的，所以文件必须自己声明，在根元素上加上 xmlns="http://www.w3.org/2000/svg"。没有它，浏览器什么也不解析，什么也不绘制，而且不会给出任何提示。另一个常见原因是填充颜色中出现未转义的 #：它会把 URI 的剩余部分变成片段标识符。

因为编码后的文档自行决定其几何尺寸。没有 viewBox，也没有 width 或 height 时，浏览器会退回到 300×150 的框。有 width 和 height 但没有 viewBox 时，图形被锁定在该尺寸，无法缩放。只有 viewBox 时可以自由缩放，这通常正是背景所需要的；请搭配 background-size 使用，或在 img 标签上明确设置 width 和 height。

不能。编码后的 SVG 是一个独立文档，宿主页面的任何东西都进不去：currentColor 按该文档自身的 color 属性解析（除非代码中有设置，否则为黑色），自定义属性也不会跨越这道边界继承。有三种变通办法：编码前在代码中修改填充色，每种颜色保留一个 URI；用 mask-image 控制图形，让可见颜色来自 background-color；或者把 svg 元素直接放进 HTML，让页面 CSS 可以为它设置样式。

不能，这一限制是有意设计的，而不是 bug。通过 url() 或 img 标签加载的 SVG 运行在受限模式下：不执行任何脚本，也不获取任何外部资源，无论是网页字体、链接的位图还是样式表。编码前请把文字转换为路径，并把任何位图作为嵌套的 Data URI 嵌入代码中。

在当前浏览器中没有实际意义上的限制：Chrome、Firefox 和 Safari 都能接受样式表中远超 1 MB 的 Data URI。常被提起的 32 KB 是 Internet Explorer 8 的限制，多年前就已无关紧要。真正的约束在别处：压缩工具和 source map 会变得难以处理，一些 CMS 字段会截断过长的值，而且每一 KB 都会随所在文件被重复下载。可以把 4 KB 视为舒适范围，把 32 KB 视为改用独立文件更合理的分界点。

四项：注释、XML 声明、标签之间只含空白的间隙，以及导出工具在属性之间留下的换行。它绝不会删除属性、舍入坐标、合并路径或重命名 id，也不会改动 text、tspan、textPath、title、desc、style 和 script 中的字符数据。声明了 xml:space="preserve" 的文档还会保留标签之间的所有间隙，不过注释和 XML 声明仍会被删除。因此这一步安全但收效有限。如果想大幅缩减体积，请先用 SVGO 处理文件，再把结果粘贴到这里。