svg在ie9以下完全不支持，降级方案包括：img标签onerror切换png、内联svg配合js检测替换、轻量polyfill（如svg4everybody）、css背景图多层声明渐进增强。

SVG在IE9以下版本（包括IE6-8）完全不支持，IE9+才开始原生支持SVG。降级处理的核心思路是：为不支持SVG的浏览器提供替代方案，同时不影响现代浏览器的正常渲染。

使用img标签加载SVG并设置fallback

最简单可靠的降级方式是将SVG作为图片引入，并利用src和onerror实现自动切换：

• 用<img src="icon.svg" onerror="this.src='icon.png'">，IE8及更早版本会触发onerror，自动加载PNG备用图
• 注意：IE9+支持SVG但可能因MIME类型错误或路径问题触发onerror，建议后端确保SVG返回image/svg+xml MIME类型
• PNG fallback需与SVG保持相同宽高比和视觉尺寸，避免布局偏移

内联SVG + JavaScript检测 + DOM替换

当需要SVG可交互（如绑定事件、CSS控制颜色）时，内联SVG更合适，但必须主动检测兼容性：

• 用document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")或更轻量的typeof SVGRect !== 'undefined'判断
• 检测失败时，用JS查找所有<svg></svg>节点，将其替换为对应<img>或<div class="svg-fallback">结构 <li>推荐配合Modernizr：引入<code>modernizr.custom.js后，直接用if (!Modernizr.svg) { ... }做分支处理

使用polyfill补全基础能力

对少量关键SVG功能（如<use></use>引用、渐变），可引入轻量polyfill增强旧IE表现：

• svg4everybody：专为<use></use>标签设计，修复IE9-11中外部SVG sprite引用失效问题，仅1KB，无依赖
• canvg（慎用）：将SVG渲染为Canvas，支持IE6+，但性能差、不支持滤镜和部分动画，仅适合静态图表类场景
• 避免使用raphael.js等重型库——它用VML重写全部图形逻辑，开发成本高且与原生SVG语法不兼容

CSS背景SVG的降级写法

当SVG用作CSS背景图（如background-image: url(icon.svg)），需叠加多层声明实现渐进增强：

• 按从旧到新顺序书写：先写PNG，再写SVG，浏览器会取最后一个有效声明
• 示例：

  .icon {<br>  background-image: url(icon.png);<br>  background-image: url(icon.svg), linear-gradient(transparent, transparent);<br>}

  ——IE8及以下用PNG；IE9+识别SVG并覆盖前一行；linear-gradient用于阻止某些Android 2.x误读SVG
• 不要依赖@supports (background-image: svg)，该语法在旧IE中无效且无法触发回退