浏览器支持与兼容性

详细介绍SVG在各浏览器中的兼容性情况，以及如何处理旧浏览器兼容问题。提供实用的SVG兼容性解决方案和fallback策略。 好消息是：现代浏览器对 SVG 的支持已经非常好了。坏消息是：你可能还要处理一些边缘情况。

浏览器支持现状

桌面浏览器

移动浏览器

功能兼容性

基本图形

矩形、圆形、椭圆、线条、多边形、路径——这些核心功能在所有支持的浏览器中都没问题。

渐变

线性渐变和径向渐变支持良好，但 IE9-10 不支持渐变动画。

滤镜

滤镜是兼容性问题的重灾区。IE 完全不支持 SVG 滤镜。

动画

SMIL 动画

Chrome 曾经要移除 SMIL 支持，后来又保留了。目前主流浏览器都支持，但 IE 不支持。

CSS 动画

用 CSS 动画操作 SVG 属性是更稳妥的选择，兼容性更好。

@keyframes pulse {
  0%, 100% { r: 20; }
  50% { r: 40; }
}
circle {
  animation: pulse 1s infinite;
}

clipPath 和 mask

裁剪路径支持良好，但 mask 在 IE 中不支持。

兼容性处理方案

方案一：特性检测

用 JavaScript 检测浏览器是否支持某个功能：

function supportsSVG() {
  return !!document.createElementNS 
    && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

if (!supportsSVG()) {
  // 降级处理
}

方案二：Fallback 图片

为不支持 SVG 的浏览器提供 PNG 备用图：

<picture>
  <source type="image/svg+xml" srcset="logo.svg">
  <img src="logo.png" alt="Logo">
</picture>

或者用 object 标签：

<object type="image/svg+xml" data="logo.svg">
  <img src="logo.png" alt="Logo">
</object>

方案三：Modernizr 检测

Modernizr 库提供了完善的特性检测：

if (Modernizr.svg) {
  // 支持 SVG
} else {
  // 不支持，加载 PNG
}

方案四：SVG Web Polyfill

对于必须支持 IE6-8 的项目，可以用 svgweb：

<script src="svg.js"></script>

它会用 Flash 或 VML 来模拟 SVG。

常见兼容性问题

问题一：IE 中 SVG 引用外部文件

IE 不支持 <use xlink:href="external.svg#icon"> 这种方式。

解决方案：把 SVG 内联到 HTML 中，或者用 JS 加载后插入。

问题二：IE 中获取 SVG 元素尺寸

IE 的 getBBox() 方法有问题。

解决方案：用 getBoundingClientRect() 代替。

问题三：Safari 中渐变颜色格式

Safari 对颜色格式要求严格，#rgb 可能不认。

解决方案：统一用 #rrggbb 或 rgb() 格式。

问题四：Firefox 中外部资源加载

Firefox 对跨域 SVG 资源有限制。

解决方案：确保资源同源，或配置 CORS。

最佳实践

1. 核心功能优先：基本图形、渐变放心用
2. 滤镜做降级：提供无滤镜的备选样式
3. 动画选 CSS：CSS 动画比 SMIL 兼容性好
4. 测试 IE11：如果需要支持，重点测试 IE11
5. 提供 PNG 备用：关键图片要有 fallback

检测工具

• Can I Use - 查询特性支持情况
• Modernizr - 特性检测库
• BrowserStack - 多浏览器测试