SCSS中直接用url()拼接data URI会因外层双引号导致Safari和旧版Chrome解析失败，必须通过自定义PostCSS插件实现URL解码校验、引号归一化、fill替换为currentColor、viewBox强制声明等处理。
SCSS里直接用url()拼接data URI会崩，因为引号和编码不匹配
你写$icon-close: "data:image/svg+xml;utf8,%3Csvg...";，再background-image: url(#{$icon-close});，编译后是url("data:image/svg+xml;utf8,%3Csvg...")——外层双引号会让 Safari 和旧版 Chrome 拒绝解析。这不是语法错误，是浏览器 URL 解析规则：带双引号的 data URI 被视为无效。
- 必须把外层引号强制转成单引号，且不能靠
str-replace粗暴替换，得在 PostCSS 层拦截 CSS 输出后再改 - SCSS 变量里的 SVG 字符串不能含未转义的
、>、"、#，得提前用%3C、%3E、%22、%23代替 -
/和:不能被encodeURIComponent编码（否则image/svg+xml变成image%2Fsvg%2Bxml），得白名单过滤
PostCSS插件比SCSS函数更可靠，但postcss-inline-svg默认不支持变量内联
postcss-inline-svg只处理url(./icon.svg)这种文件路径语法，对 SCSS 插值url(#{$icon-x})完全无感——它在 CSS AST 阶段才介入，而 SCSS 变量早已展开为字符串。静默失败，不报错也不生效。
- 真正能用的方案是自定义 PostCSS 插件，监听所有
background-image声明中含data:image/svg+xml的值 - 插件要干三件事：URL 解码校验（防双重解码）、引号归一化（双引号→单引号）、过滤换行和多余空格
- 别在 SCSS 里用
#{}拼接 MIME 类型，data:image/svg+xml;utf8,必须硬编码在变量值开头
currentColor在data URI里不会自动生效，必须手动替换fill属性
原始 SVG 是fill="#333"，哪怕父元素设了color: red，背景图里的图标还是黑的——data URI 是静态快照，没有 DOM 上下文。PostCSS 插件必须在内联前扫描并重写。
- 只替换
fill="xxx"，跳过fill-rule、fill-opacity、stroke - 已为
currentColor或none的值不重复替换 - 含
stop-color也改成stop-color="currentColor"并加id，否则渐变失效 - 删掉
声明，否则 URL 解码后 XML 解析失败
尺寸和viewBox必须显式声明，background-size救不了data URI的缩放异常
很多人以为加background-size: contain就能让 SVG 自适应容器，但 data URI 背景图没有固有宽高，浏览器按viewBox推算“原始尺寸”。如果 SVG 源文件没写width、height或viewBox，渲染结果会模糊、错位或比例失真。
- 导出 SVG 时必须保留
viewBox="0 0 w h"，且w、h为整数 - 别依赖
background-size: 1em 1em去“修正”，它只是拉伸图像，不是重绘矢量 - 高 DPI 屏幕下模糊？检查 SVG 是否含
px单位路径（应全用无单位坐标）
真正卡住多数人的不是编码逻辑，是 SVG 源文件本身的质量——viewBox缺失、fill硬编码、含 JS 或外部引用、BOM 头残留。这些在 PostCSS 层无法自动修复，得前置校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
