Data URI生成

这个工具把一段文本、SVG 图标、内联 CSS 或一小段脚本转成 data: 开头的 URI 字符串，让这些资源不再需要单独放一个文件、发一次 HTTP 请求，而是直接以字符串形式嵌进 HTML、CSS 或 JS 里。典型痛点是页面上有几个几百字节的小图标或占位图，为它们各自建文件、走一次请求时，连接握手和队列排队的开销往往比传输本身还大；把它们编成 data URI 内嵌后，这部分请求数直接归零。你只要粘贴内容、选好编码方式，就能拿到可直接复制的完整 data URI，本地完成编码不上传。

data URI 的格式是 data:[<mediatype>][;base64],<data>，由 RFC 2397 定义。前面的 MIME 类型(如 image/svg+xml、text/css)告诉浏览器该按什么类型解析，后面的数据段有两种写法：一种是 Base64，把任意字节按 6 位一组映射成 64 个可见字符，体积约膨胀三分之一，适合二进制或含大量特殊字符的内容；另一种是百分号编码(URL 编码)，只把 #、%、< 这类在 URI 上下文里有歧义的字符转义，对 SVG 这种本身就是文本的内容通常比 Base64 更短。文本会先按 UTF-8 取字节再编码，所以中文、emoji 也能被浏览器正确还原，不会乱码。

最常见的用法是把小图标塞进 CSS：例如一个 16×16 的 SVG 箭头，生成 data URI 后写成 background: url("data:image/svg+xml,...")，省掉一张图片的请求。另一个场景是邮件模板或单文件 HTML——很多邮件客户端和离线页面不方便引用外部资源，把 logo、分隔线转成 data URI 直接内嵌，整个页面就是自包含的一个文件，拷到哪都能显示。其实构建工具里的小图片内联(如 webpack 的 asset/inline、CSS 里的 url-loader 阈值)本质就是同一件事，这个工具让你不启动构建、临时改一个图标时也能手工生成一份对应字符串。

需要注意 data URI 并非越多越好：内联的内容会随 HTML/CSS 一起下载、无法被浏览器单独缓存，同一张图在多个页面重复内联反而浪费流量，一般只对几 KB 以内、复用不多的小资源才划算。Base64 会让体积变大约三分之一，SVG 这类文本优先考虑 URL 编码更省。此外在 CSS 里内联 SVG 时，若不做编码直接塞原文，其中的 # 号会被当成 URL 的片段标识符而截断，双引号也要和外层引号错开，所以即便看起来是纯文本，过一遍编码往往更稳妥。

Data URI生成是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“data uri生成”、“dataurl生成”、“data uri”，说的都是这个。