SVG背景图无法用CSS控制fill，因其作为黑盒图片加载不解析内部结构；大型多色SVG需预处理，可行方案包括构建期内联+currentColor或data URI硬编码颜色，但IE/Edge要求颜色编码去#号，且超3个大型SVG应改用sprite或压缩优化。
SVG背景图无法用CSS控制fill，本质是资源隔离
直接写 background-image: url(icon.svg) 后再加 svg path { fill: red; } 完全无效——浏览器把 SVG 当作黑盒图片加载，不解析内部结构，currentColor、CSS变量、伪类都进不去。这不是写法错，是机制限制。
大型SVG背景图的填充颜色必须预处理，不能靠运行时
如果你的 SVG 背景图体积大（比如 >5KB）、含多色路径或渐变，又需要主题色切换，别指望 CSS 动态填色。可行路径只有两条：
- 用构建工具（如 SVGR、svg-inline-loader）在编译期把 SVG 内联进 HTML 或 JS，再清理内联
fill属性，配合fill: currentColor - 用
data:image/svg+xmlURI + Less/Sass 变量插值，把颜色值硬编码进 SVG 源码字符串里（例如把fill="%23333"替换成fill="@{primary-color}"），但只适用于单色、静态主题 - 若必须用
background-image且要换色，只能导出多套 SVG（icon-primary.svg、icon-dark.svg），用媒体查询或 JS 切换 URL
IE/Edge 兼容性坑：十六进制编码不能带 #
在 data:image/svg+xml 中写颜色时，%23ff0000（即 #ff0000）在 IE 和旧 Edge 里会解析失败。必须改成 ff0000 或 rgb(255,0,0)。
Less 里无法调用 encodeURIComponent()，所以不能自动转义；得靠 Webpack 插件（如 svg-url-loader 的 encode 选项）或预处理脚本完成。
立即学习“前端免费学习笔记（深入）”；
性能临界点：超过 3 个大型 SVG 背景图就该考虑 sprite 或内联
每个 background-image: url(...) 都是一次 HTTP 请求（即使缓存），而大型 SVG（尤其含 <defs></defs> 和渐变）解析开销高。实测发现：
- 单页超过 3 个 >10KB 的 SVG 背景图，首屏渲染延迟明显上升
- 改用 SVG sprite（
<symbol></symbol>+<use></use>）+ 内联，可减少请求、复用解析结果 - 若必须保留 background-image，至少压缩 SVG：用
svgo --multipass --convert-colors去掉命名色、冗余属性和注释
真正影响性能的不是“填色逻辑”，而是 SVG 加载、解析、光栅化的全过程——填色只是最后一步，前提是你得先让它进 DOM 或被浏览器正确解码。
