data uri将svg内容直接编码进css，避免额外http请求，提升首屏渲染速度；但需url编码、移除xml声明，注意浏览器兼容性及css属性限制。
SVG作为CSS背景时，为什么Data URI能避免额外HTTP请求
因为Data URI把SVG内容直接编码进CSS里，浏览器不用再发一次网络请求去加载外部.svg文件。尤其在小图标、装饰性图形（比如background-image: url("data:image/svg+xml;utf8,...")）场景下，省掉1–3个请求，首屏渲染更快。
但要注意：SVG必须是纯文本可编码的——不能含<script></script>、外部<image href></image>或二进制数据；UTF-8编码下，尖括号、双引号、换行符都得URL编码，否则CSS解析失败。
- 用
encodeURIComponent()处理原始SVG字符串（注意：先去掉XML声明<?xml ...?>） - Chrome/Firefox支持
utf8参数，Safari旧版只认charset=utf-8，稳妥起见写成data:image/svg+xml;charset=utf-8 - IE11不支持UTF-8 Data URI中的中文或特殊符号，需改用
base64编码（但体积增大~33%）
如何安全地把SVG字符串转成CSS可用的Data URI
手写编码容易漏掉、<code>>、"这些字符，导致背景不显示。最稳的方式是用JS动态生成并注入，而不是硬编码在CSS里。
例如，一个带颜色变量的SVG图标：
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill="${color}" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z"></path></svg>
`;
然后用：
element.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)})`;
- 务必移除SVG开头的
<?xml version="1.0" encoding="UTF-8"?>，它会导致Data URI解析失败 - 如果SVG里有
id、class或内联style，确保它们不会和页面其他样式冲突（Data URI里的ID在DOM中不可选中） - Webpack/Vite用户可用
svg-url-loader或@svgr/webpack自动处理，但注意开启encode: 'uri'而非默认base64
使用Data URI SVG背景时，哪些CSS属性会失效或受限
background-size、background-position照常工作，但background-color无法给SVG“上底色”——SVG自身fill或stroke才是最终颜色。更关键的是：background-repeat在某些SVG中可能表现异常，尤其是viewBox和width/height不匹配时。
- 避免在SVG根元素写
width和height（保留viewBox即可），否则缩放时易变形 -
background-blend-mode对Data URI SVG无效，浏览器不把它当“图像层”参与混合 - 不能用
filter: drop-shadow()直接作用于Data URI背景，需包一层::before伪元素并设content: "" - 暗色模式适配需靠JS监听
prefers-color-scheme后重写backgroundImage，CSS媒体查询无法穿透Data URI内容
什么时候不该用Data URI而该用<svg></svg>内联或img标签
当SVG需要交互（如hover变色、JS绑定click）、动画（SMIL或CSS @keyframes）、或尺寸随容器流式变化（比如width: 100%且height: auto）时，Data URI就力不从心了。
- Data URI是静态快照，无法响应
:hover改变fill——除非你准备两套Data URI并用CSS切换background-image - 超过1KB的SVG转Data URI会让CSS文件明显膨胀，影响CSS缓存效率和首字节时间（TTFB）
- 图标字体或系统图标（如
system-ui）在可访问性（screen reader）、缩放、高对比度模式下更可靠，Data URI SVG默认无aria-label支持
真正省事又可控的做法：小而静态的装饰图案用Data URI；带状态、需语义、要动画的SVG，老老实实内联或img引入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
