svg网页引用分blob url和base64两种：base64适合静态小图标内联，免请求、无跨域，但体积大时膨胀明显；blob适合动态生成、上传、导出等交互场景，更轻量灵活，需手动释放内存。
SVG资源在网页中引用，主要用 Blob URL 和 base64 两种方式，适用场景不同，不能混用。关键看是否需要动态生成、是否要参与后续操作（如上传、下载、编辑），以及资源大小和维护成本。
base64 方式：适合静态小图标与内联优化
把 SVG 源码直接编码为 base64 字符串，写进 CSS 的 background 或 HTML 的 img src 中。例如：
这种方式免 HTTP 请求，无跨域问题，特别适合按钮图标、加载动画、装饰性 SVG。但注意：
– SVG 原文需先做最小化（移空格、注释、冗余属性）
– 必须对特殊字符（如 , ", &）做 URL 编码，或改用 utf8 方式嵌入：
url("data:image/svg+xml;utf8,")
– 文件过大（如超 2KB）会导致 CSS/HTML 显著膨胀，得不偿失
Blob URL 方式：适合动态生成与交互场景
当 SVG 内容由 JS 动态生成、用户上传、或需进一步处理（如导出 PDF、Canvas 绘制、上传到后端），应转为 Blob，再用 URL.createObjectURL() 创建临时地址：
- 先构造 SVG 字符串，用 new Blob([svgStr], {type: 'image/svg+xml'}) 封装
- 调用 URL.createObjectURL(blob) 得到类似 blob:http://localhost/abc123 的地址
- 赋给 img.src 或 CSS background-image 即可显示
- 使用完毕后建议调用 URL.revokeObjectURL(url) 释放内存
相比 base64，Blob 更轻量（无编码膨胀）、更灵活（支持流式读写、可转 FormData 上传），也兼容现代 API（如 fetch、jsPDF、FileReader）。
SVG 转 base64 的实操要点
手动转需注意三步：SVG 文本 → UTF-8 编码 → Base64 编码。浏览器中可用以下简易方法：
- 用 encodeURIComponent(svgString) 处理原始 SVG（比 atob/btoa 更安全）
- 若用 atob/btoa，必须确保字符串是纯 ASCII；含中文或 Unicode 时需先转成 Uint8Array 再编码
- 微信小程序等封闭环境不支持直接内联 SVG，必须转 base64 后用 background-image 引用
- 在线工具如 https://codepen.io/jakob-e/pen/doMoML 可一键转换并自动编码
选 Blob 还是 base64？看这三点
– 图标固定、数量少、无需修改 → 优先 base64，减少请求数
– SVG 来自接口、用户绘制、需导出或二次加工 → 必须用 Blob
– 要兼容老浏览器（IE11）且无法用 polyfill → base64 更稳妥，Blob 需降级处理
