SVG在CSS中不显示通常由路径错误、MIME类型配置不当、编码问题或浏览器安全策略导致；应先用开发者工具检查404错误，再验证服务器Content-Type、URL编码及CSP限制。
SVG图片在CSS中不显示的问题通常和路径、格式、编码或浏览器支持有关。先确认问题出在哪个环节，再针对性解决。
检查文件路径是否正确
最常见的原因是资源路径错误。确保你在CSS中引用的SVG路径是正确的，尤其是相对路径容易出错。
- 使用开发者工具（F12）查看网络请求，确认SVG文件是否返回404
- 路径建议用相对于CSS文件或根目录的写法，例如：
background: url('../images/icon.svg') no-repeat; - 如果部署在子目录，注意路径层级是否匹配
确认MIME类型和服务器配置
有些服务器未正确配置SVG的MIME类型，导致浏览器拒绝加载。
- 检查响应头中Content-Type是否为 image/svg+xml
- 如果是Apache服务器，在 .htaccess 添加：
AddType image/svg+xml svg svgz - 如果是Nginx，在配置中加入：
types { image/svg+xml svg; }
处理特殊字符和编码问题
如果SVG内联或通过data URI嵌入，编码不当会导致显示异常。
立即学习“前端免费学习笔记（深入）”；
- URL中的#、等符号需要转义或使用 encodeURIComponent 处理
- 推荐使用 Base64 编码避免问题，例如：
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=='); - 或者对原始XML进行URL编码，替换 # 为 %23 等
考虑浏览器兼容和防XSS拦截
部分浏览器出于安全考虑会阻止内联SVG，特别是老版本IE或严格CSP策略下。
- IE9+ 支持外部SVG，但IE8及以下不支持
- 检查是否有内容安全策略（CSP）禁止 inline 或 data: 资源
- 可尝试将SVG放在img标签中测试是否能单独显示
基本上就这些。先从路径和网络状态查起，再逐步排查编码和安全策略，多数情况都能定位到原因。
