IE浏览器中SVG作为CSS背景图无法显示的问题求助

我之前踩过不少IE对SVG背景的兼容性坑，结合你的代码情况，给你几个实用的解决思路：

1. 修复SVG文件的兼容性结构 #

IE对作为背景图的SVG有严格的格式要求，你可以先调整SVG的开头部分：

• 添加XML声明
• 确保内联所有样式（IE加载背景SVG时不会读取外部样式表，依赖外部CSS会导致样式失效）
• 简化可能不兼容的属性（比如preserveAspectRatio可以先测试xMidYMid meet，或者暂时去掉验证是否是这个属性导致的问题）

修改后的SVG示例：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- 把你的SVG图形内容放在这里，所有样式直接内联到对应元素上 -->
</svg>

2. 将SVG转为Data URI直接嵌入CSS #

把SVG编码成base64的Data URI，直接写在background属性里，这样IE不需要单独请求SVG文件，能避免很多加载和解析问题。

转换后的CSS示例：

#loading-img {
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjBweCIgaGVpZ2h0PSI2MHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+...'); /* 替换成你SVG的完整base64编码 */
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  background-position: center;
}

你可以用在线工具把SVG内容转成base64，注意要确保编码后的内容没有特殊字符错误。

3. 添加IE专属的回退方案 #

如果上面的方法都不生效，可以给IE单独设置PNG/GIF格式的回退图，保证页面加载效果：

方法A：使用IE条件注释 #

<!--[if IE]>
  <style>
    #loading-img {
      background: url(/icons/loader.png) no-repeat center center !important;
      background-size: 60px 60px !important;
    }
  </style>
<![endif]-->

方法B：使用CSS Hack #

#loading-img {
  background: url(/icons/loader.svg) no-repeat center center;
  height: 100%;
  width: 100%;
  /* 针对IE9-10的专属hack */
  background: url(/icons/loader.png) no-repeat center center\9;
  background-size: 60px 60px\9;
}

4. 检查服务器的SVG MIME类型配置 #

如果服务器没有正确设置SVG的MIME类型为image/svg+xml，IE会把SVG当成文本文件处理，导致无法显示。你需要在服务器配置里添加：

Apache（.htaccess） #

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Nginx #

types {
  image/svg+xml svg svgz;
}
gzip_types image/svg+xml;

建议先从修改SVG文件结构开始测试，这是最常见的解决方式，大部分IE下SVG背景不显示的问题都能通过这个方法解决。

内容的提问来源于stack exchange，提问作者Archit Arora