使用方法
- 将 .svg 文件拖到上传区域，点击选择文件，或粘贴图片。
- 保持原格式即可编码 SVG 代码本身；选择 PNG、JPEG 或 WebP 则会把它转换为位图。
- 如果转换为位图，可以设置最大宽度来控制像素尺寸。
- 复制 CSS background-image 输出用于样式表，或使用 Data URI、纯 Base64、img 标签、Markdown 版本。
把 SVG 用作 Data URI
SVG（可缩放矢量图形，MIME 类型为 image/svg+xml）用 XML 文本描述图形，放大多少倍都保持清晰。它的 Base64 通常以 PHN2Zy（即编码后的 <svg）开头；如果文件以 XML 声明开头，则是 PD94bWw。
SVG 作为图片使用时，根元素必须带有 xmlns="http://www.w3.org/2000/svg"。从 HTML 中复制的内联 SVG 常常缺少这个属性，生成的 Data URI 就会一片空白。图片模式下外部资源也会被拦截，SVG 里引用的网络字体和外链图片都不会加载，需要先把文字转为路径，或把这些资源内嵌进去。
用 Base64 还是 URL 编码？
SVG 本身就是文本，Data URI 可以直接携带代码，只需对少数字符做百分号编码（<、>、#、% 和引号）。对于 CSS 中的普通图标，这种写法比 Base64 更短，gzip 压缩效果也更好。如果字符串要经过会破坏引号或特殊字符的系统，或者 API 明确要求 Base64，那么 Base64 更稳妥。
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* 百分号编码 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");需要百分号编码形式时，可以使用 Data URI 生成器并选择百分号编码。
处理不可信的 SVG
SVG 可以包含 <script> 元素、onload 之类的事件属性以及指向其他文档的链接。通过 <img> 或 CSS 背景显示 SVG 时，浏览器不会执行其中的脚本，但同一个文件内联到 HTML 中或被单独打开时，脚本就可能运行。如果你的应用允许用户上传 SVG，请在存储或嵌入之前先做净化处理，例如使用 DOMPurify。Base64 只是让代码不那么一目了然，并不能让它变得安全。
常见问题
SVG 用 Base64 好还是 URL 编码好？
在 CSS 中使用 SVG 时，URL 编码通常更短，也保持可读。字符串需要经过其他系统传递，或 API 要求 Base64 时，Base64 更可靠。
为什么我的 SVG Data URI 不显示？
xmlns 属性；百分号编码的地址中有未转义的 #；SVG 从其他文件加载了字体或图片。可以把 SVG 转成 PNG 的 Base64 吗？
可以。把目标格式设为 PNG，浏览器会把 SVG 渲染为像素，还可以用“最大宽度”选项缩小结果。