SVG → Base64
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
Base64 data URI
凡是能放 URL 的地方都能用。体积总会比原文件大三分之一左右。
URL 编码的 data URI
同一张图，通常比 Base64 更小 —— 而且仍然可读，调 CSS 时很有用。
HTML img 标签
CSS 背景
OneImageTool
图片工具一站搞定 — 免费、无需上传
SVG → Base64
把 SVG 变成可直接粘进 HTML 或 CSS 的 data URI —— Base64 与通常更小的 URL 编码形式并排给出。
或点击浏览 —— 仅限 SVG
凡是能放 URL 的地方都能用。体积总会比原文件大三分之一左右。
同一张图，通常比 Base64 更小 —— 而且仍然可读，调 CSS 时很有用。
少一次请求
data URI 把图片直接放进 HTML 或 CSS 里，浏览器就不必为它再发一次请求。对小图标来说，这就是「立刻出现」和「晚一拍出现」的区别。
代价是缓存：内联的图标会随每一个包含它的页面被重新下载，也无法单独缓存。只把首屏真正要紧的那几个图标内联，其余的仍旧留作文件。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
复制 Base64 或 URL 编码的 data URI。
直接用现成的 img 标签或 CSS 背景规则。
快速解答
对 SVG 而言通常是 URL 编码更小，因为 SVG 本身是文本，而 Base64 会让任何内容膨胀约 33%。URL 编码还保持可读，你能在样式表里一眼认出那是哪个图形。只有当处理链路上有环节会破坏原始字符时，才改用 Base64。
Base64 用四个字符表示三个字节，三分之一的膨胀无法避免。建议先用 SVG 优化器处理一遍 —— 编辑器留下的元数据和过高精度的坐标，往往比编码本身占得更多。
可以 —— CSS 代码块可直接粘贴。它在双引号内使用 URL 编码形式，这也是编码器把 SVG 自身的双引号换成单引号的原因。
几乎总是因为有个没转义的 `#`。像 `#fff` 这样的颜色会让 URL 在那里被截断，后面的内容全被当成片段标识符。这里的输出已经做了转义 —— 这个问题通常出现在事后手工改过 data URI 之后。
不会。编码只是在您的浏览器里做的字符串处理。