Data URI适用于小（≤4KB）、少复用、怕路径或跨域的资源，如小SVG、loading动画；禁用于字体、JS/CSS及>8KB图片；需URL编码非Base64 SVG；HTML/CSS中写法不同；体积膨胀33%且无法缓存，多页共用时应优先外链。
能用 Data URI 的资源，必须满足「小、少复用、怕路径或跨域」三个条件；否则就该用 ./icon.png 或 CDN 链接。
什么时候该用 data: 而不是文件路径
常见错误现象：双击打开本地 HTML 时图标不显示、HTTPS 页面加载 HTTP 图标被拦截、构建后相对路径错乱导致 404。
- 图标、小 SVG 箭头、1–4KB 内的 loading 动画 —— 适合用
data: - 字体文件（
.woff2）、JS/CSS、大于 8KB 的 PNG —— 坚决不用，体积膨胀 + 无法缓存 - 本地开发用
file://协议时，./路径基本失效，data:是唯一稳定方案 - 邮件模板、离线文档等无法托管静态资源的场景，
data:可避免外链失效
data:image/svg+xml 不加 base64 怎么写
原始 SVG 文本不能直接拼进 URL，尖括号、引号、空格都会破坏解析。必须做 URL 编码（不是 Base64），例如：
<svg viewBox="0 0 200 100"><circle cx="100" cy="50" r="40" fill="blue"/></svg>
要转成：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20200%20100%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22blue%22%2F%3E%3C%2Fsvg%3E
- 手动编码极易出错，推荐用 JS 动态生成：
encodeURIComponent(svgString) - IE8 不支持非 Base64 的
data:image/svg+xml，如需兼容，必须走base64 - 现代浏览器都支持，但注意：XML 声明（如
<?xml ...?>）和注释会触发解析失败，务必删掉
data: 在 HTML 和 CSS 中的写法差异
同一段 Base64 字符串，在不同位置写法要求完全不同，写错就白费功夫。
- HTML 中用于
<img src="">或<link href="">：引号必须闭合，且值中不能换行 ——<img src="data:image/gif;base64,R0lG..."> - CSS 中用于
url()：引号可选，但若含括号或逗号需加引号 ——background: url(data:image/png;base64,iVBOR); - 写在 HTML 的
style属性里：要双重转义引号 ——style="background:url('data:image/svg+xml,...')" - SVG 标签内嵌内容（如
<svg>...</svg>）不是 Data URI，那是原生 DOM，别混淆
Base64 编码后体积变大，还值得用吗
Base64 会让二进制数据膨胀约 33%，一张 2KB 的 PNG 编码后变成 ~2.7KB —— 这本身不是问题，真正影响性能的是两点：
- 首次 HTML 文件体积增大，可能拖慢首屏解析（尤其移动端弱网）
- 所有内联资源随 HTML 一起重载，无法利用 HTTP 缓存 —— 改一个图标就得整个 HTML 重新下载
- 如果多个页面共用同一张图，用
data:实际上是重复嵌入，不如用单独的icon.png让浏览器缓存一次用到处
最容易被忽略的一点：构建工具（如 Webpack/Vite）默认不会处理 HTML 中硬写的 data: 字符串，也就没法自动压缩、去重、按需加载 —— 手动维护几十个 Base64，很快就会失控。
