SCSS变量存SVG字符串再插值进url()会失败，因编译后url("data:image/svg+xml;utf8,...")多出外层双引号，导致Safari等浏览器拒解析且静默失效。
不能用 SCSS 变量存 SVG 字符串再插值进 url()，这是最常导致静默失效的写法；正确路径是手动 URL 编码后“躺平”写死在 url('data:image/svg+xml;utf8,...') 里。
为什么 $icon: "data:image/svg+xml;utf8,..."; background-image: url(#{$icon}); 会失败
SCSS 不解析 SVG，只做字符串拼接。一旦你把编码后的 SVG 存进变量，再用 #{$icon} 插值，编译结果会多套一层双引号：url("data:image/svg+xml;utf8,%3Csvg...")。浏览器看到外层双引号就拒解析——尤其 Safari 和旧 Chrome 直接忽略，不报错也不渲染。
- 所有换行、空格、未转义的
"或都会让 data URI 失效 - XML 声明
<?xml ... ?>必须删掉，只留<svg xmlns="http://www.w3.org/2000/svg"></svg> -
viewBox在 data URI 中无效，必须显式写width和height（比如width="16" height="16"） - 别指望
fill="#333"能被 CSS 覆盖——得改成fill="currentColor"，靠父元素color控制颜色
怎么安全生成 UTF-8 data URI 字符串
推荐用 Python 一行搞定： python -c "import urllib.parse; print(urllib.parse.quote(open('clipboard-fill.svg').read(), safe=''))"。它会把 → <code>%3C、" → %22、# → %23 等全部转义，且不加多余空格。
- 原始 SVG 中若有
<defs><lineargradient></lineargradient></defs>，必须内联扁平化——data URI 不支持跨引用 - 务必用单引号包裹整个
url('...')，避免引号嵌套冲突 - 导出 SVG 时关掉 Illustrator 的“响应式”选项，确保
width/height固定（如16x16），别只靠viewBox
SCSS 里怎么组织才不踩坑
放弃“集中管理 SVG 变量”的念头。每个图标单独写一个 class，字符串直接贴进去，不抽象、不复用、不插值。
立即学习“前端免费学习笔记（深入）”；
- 不要建
_icons.scss然后一堆$icon-close、$icon-copy - 像这样写：
.icon-copy { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"16"%20height%3D"16"%20fill%3D"currentColor"%3E%3Cpath%20d%3D"M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8S12.4%200%208%200zm0%2014c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.7%206-6%206z"%2F%3E%3C%2Fsvg%3E'); } - 如果图标太多，用构建脚本自动生成这些 class，而不是手写 SCSS
- 配色统一靠
color继承，别在 data URI 里写死 hex 值
真正难处理的是带渐变、滤镜或 <use></use> 引用的 SVG——它们无法被扁平化进 data URI，这时候就得切回 <svg><use></use></svg> 或 sprite 方案，别硬扛。
