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+xmlMIME类型 - 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>节点，将其替换为对应<img>或<div class="svg-fallback">结构 - 推荐配合Modernizr：引入
modernizr.custom.js后，直接用if (!Modernizr.svg) { ... }做分支处理
使用polyfill补全基础能力
对少量关键SVG功能（如<use>引用、渐变），可引入轻量polyfill增强旧IE表现：
立即学习“前端免费学习笔记（深入）”；
-
svg4everybody：专为
<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中无效且无法触发回退
