Data URL适用于小体积（1–4KB）、复用少、需规避跨域或路径问题的资源，如图标、SVG箭头；大文件、字体、JS/CSS禁用，因其增大HTML体积且无法缓存。
直接用 data: 前缀就能内联资源，但不是所有情况都适合——关键看体积、编码方式、使用位置和浏览器兼容性。
什么时候该用 data: 而不是 ./icon.png
核心判断标准是「资源是否小、是否复用少、是否怕跨域或路径错」。图标、加载动画、简单 SVG 箭头这类 1–4KB 以内的内容最合适；大图、字体文件、JS/CSS 文件坚决不用。
-
data:绕过 HTTP 请求，但会增大 HTML/CSS 体积，且无法被单独缓存 - 本地开发双击打开 HTML 时，
./路径常因 file:// 协议失效，而data:不受影响 - HTTPS 页面引用 HTTP 外链会触发混合内容警告，
data:完全规避这个问题 - IE8 限制
data:图片大小 ≤ 32KB，且只支持<img>、<link>、CSSurl()等少数场景
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>，要写成：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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() 动态生成，或干脆用 base64 避免手写出错。
data: 在 CSS 和 HTML 中的写法差异
CSS 里只能出现在 url() 函数中，且引号可选；HTML 中用于 <img src=""> 或 <link href="">，引号必须闭合。
- CSS 示例：
background-image: url(data:image/png;base64,iVBOR...);（单/双引号都行） - HTML 示例：
<img src="data:image/gif;base64,R0lG...">（必须带引号，且不能换行） - HTML 中若写在
style属性里，要双重转义引号：style="background:url('data:image/...')" - SVG 写在
<img>的src里，必须base64或完整 URL 编码；写在<svg>标签内就不是data:，而是原生 DOM
Base64 编码后体积变大，怎么权衡
Base64 会让二进制数据膨胀约 33%，所以一张 2KB 的 PNG 编码后变成 ~2.7KB。这不是问题，除非你塞了几十个大图进去。
- 真正影响性能的是「首次 HTML 下载体积」和「能否利用 HTTP 缓存」——
data:把请求省了，但每次页面重载都得重新下载全部内联数据 - 如果同一张图标在多个 CSS 文件里重复出现，用
data:会导致三份冗余编码，不如外链一次、多处引用 - 构建工具（如 Webpack/Vite）通常默认对 ≤ 4KB 的资源自动转
data:，这个阈值就是综合体积与请求数算出来的平衡点 - 用
curl -s 'https://example.com/icon.svg' | base64 -w0（macOS/Linux）或在线工具生成时，注意别混入换行或空格
最容易被忽略的是：SVG 内联时若含 <use href="#id"> 引用外部 symbol，这种引用在 data: 里完全失效——因为没有宿主文档 DOM，#id 查无此地。
