内联SVG作背景需URL编码并确保MIME前缀正确，外部SVG需服务器返回image/svg+xml，内联<svg>标签更适合交互场景；viewBox在data URL中无效。
直接用 background-image 加 SVG 是可行的，但必须注意编码和 MIME 类型问题——浏览器对内联 SVG 作为背景的解析很敏感，稍有格式偏差就会静默失败。
SVG 内联写法必须 URL 编码
把 SVG 当作 data URL 使用时，<、>、"、# 等字符必须被编码，否则 CSS 解析会中断。不能直接把原始 SVG 字符串塞进 url("...") 里。
- 推荐用在线工具（如 URL Encoder）或 Python 的
urllib.parse.quote处理 - 编码后要保留
data:image/svg+xml;charset=utf-8,前缀，且逗号后**不能有空格** - 如果 SVG 含
<style>或<defs>，确保所有引号都已转义（例如"）
body {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='20' fill='%23007acc'/%3E%3C/svg%3E");
}
外部 SVG 文件更稳定，但需注意 MIME 类型
引用外部 .svg 文件最省心，但服务器必须返回正确的 Content-Type: image/svg+xml，否则 Chrome/Firefox 会拒绝渲染为背景。
- 本地开发用 VS Code Live Server 通常没问题；用 Python
http.server则默认返回text/plain，背景不显示 - Nginx 需确认配置含
types { image/svg+xml svg; } - Webpack/Vite 项目中，把 SVG 放
public/目录下引用，避免打包插件误处理
header {
background-image: url("/assets/pattern.svg");
background-size: 20px 20px;
}
用 <svg> 标签 + position: fixed 模拟背景（适合复杂交互）
当 SVG 需要响应式缩放、JS 控制动画或与页面元素联动时，内联 <svg> 并定位比纯 CSS 背景更可控。
立即学习“前端免费学习笔记（深入）”；
- 给
<svg>设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 加
pointer-events: none;防止遮挡下方点击 - 若 SVG 内部有
<text>或需要字体，确保@font-face已加载，或改用fill替代文字
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;"> <rect width="100" height="100" fill="%23f5f5f5"/> <circle cx="50" cy="50" r="5" fill="%23007acc"/> </svg>
真正容易被忽略的是：SVG 作为背景时，viewBox 和 width/height 属性在 data URL 中无效，缩放完全依赖 CSS 的 background-size；而外部文件或内联标签方式中，viewBox 才起作用。别指望在 data URL 里写 width="100%" 来自适应——它会被忽略。
