SVG作背景图不能直接用url(logo.svg)，因受CSP、CDN等限制且无法动态控制颜色尺寸；Data URI方案可绕过限制并保留矢量特性与样式可调性，但需精简SVG、正确URL编码（如"→%22、 →%20）、删除XML声明、改fill为currentColor，并用单引号包裹CSS值。
SVG作为背景图时，为什么不能直接用 url(logo.svg)？
因为部分环境（比如某些CDN、CSP策略严格的服务端、或内联HTML中）会阻止外部资源加载；更关键的是，url(logo.svg) 无法动态控制SVG内部颜色、尺寸等——它被当作一张位图对待了。
Data URI 方案把SVG代码整个编码进CSS，绕过跨域和请求限制，还能保留矢量特性与样式可调性。
- 必须确保SVG源文件是纯文本、无BOM、无XML声明（如
<?xml version="1.0" encoding="UTF-8"?>） - 所有双引号需转义为
"，否则CSS解析失败 - 如果SVG含
<style>或内联fill，会被CSS层叠规则覆盖，但优先级比外部CSS低
如何手动生成合法的SVG Data URI？
核心是三步：精简SVG → URL编码 → 拼入 url(data:image/svg+xml, 前缀。别用在线工具一键生成——它们常漏掉空格/换行/引号处理，导致背景不显示。
- 用
svgo命令行压缩原始SVG：svgo -i logo.svg -o logo.min.svg --config='{"plugins":[{"removeXMLNS":true},{"removeViewBox":false}]}' - 手动删除
<?xml ... ?>和多余注释；把fill="#000"改成fill="currentColor"（方便后续用CSS控制颜色） - 用浏览器控制台执行
encodeURIComponent(svgString)编码（注意：不是encodeURI），再拼成url(data:image/svg+xml,%3Csvg...)
CSS里写Data URI背景时，哪些字符最容易出错？
90% 的“背景消失”问题都出在没处理好引号和空格。Data URI本质是URL，空格、"、#、、<code>> 全部必须编码，但开发者常只编了尖括号。
立即学习“前端免费学习笔记（深入）”；
-
"必须变成%22（不是"！后者是HTML实体，在CSS里无效） -
%20，不能留原样 -
#必须变成%23，否则被当成CSS颜色值或ID选择器截断 - 整段Data URI建议用单引号包裹CSS属性值，避免外层引号冲突：
background-image: url('data:image/svg+xml,...');
要不要用 background-size: contain 控制SVG缩放？
要，但得看场景。SVG作为背景图默认平铺，且不自动适配容器宽高——contain 或 cover 是必须显式声明的，否则可能只显示左上角一小块或严重拉伸。
- 图标类小背景（如按钮icon）：用
background-size: 1em 1em或具体像素值更可控 - 响应式装饰条/分隔线：配合
background-repeat: repeat-x+background-size: auto 2px - 避免用
background-size: 100% 100%，它会强制拉伸破坏SVG宽高比
真正麻烦的是多色SVG——Data URI里没法用CSS变量动态换色，只能靠 currentColor 或提前准备多个版本。这点容易被忽略，直到UI改版才发现换色成本极高。
