支持 SVG 的快速验证方法是运行 typeof SVGElement !== 'undefined'，返回 true 表示具备基础解析能力，但不保证渲染正常；IE8 及更早版本或精简 WebView 会返回 undefined 或 false。
怎么快速确认当前浏览器是否支持 SVG
直接在控制台运行一行代码就能验证，不用查文档或猜版本：typeof SVGElement !== 'undefined'。返回 true 就表示基础 SVG 解析能力存在；如果返回 undefined 或 false，说明是 IE8 及更早版本，或者启用了极端精简的 WebView 内核。
注意：这个判断只反映「能否解析 SVG 标签」，不保证渲染效果正常。比如某些 Android 4.3 系统虽然返回 true，但 <linearGradient> 会失效。
- 别用
document.createElement('svg').namespaceURI做主判断——IE9+ 返回http://www.w3.org/2000/svg，但部分旧版 Opera 会抛错 - 服务端渲染场景下，不能依赖
window或document，得靠 User-Agent 字符串 + 已知兼容表兜底 - 微信内置浏览器（X5 内核）从 v6.6.7 起支持完整 SVG，但
foreignObject仍禁用，需单独测
SVG 内联写法在哪些浏览器里会出问题
把 SVG 代码直接写进 HTML（即内联 SVG），看似省事，但在 Safari 10–12 和 iOS 11–12 的 WebKit 中，<use> 引用外部 <symbol> 时可能加载失败，表现为图标空白。根本原因是这些版本对跨文件 <use> 的 CORS 处理不一致。
- 避免在
<svg>外部用<use href="icon.svg#home">，改用内联定义全部<symbol>再引用 - Safari 13+ 和 Chrome 70+ 支持
href属性，但老版本必须用xlink:href（已废弃但兼容性更好） - Vue / React 组件中动态插入内联 SVG 时，注意框架可能过滤
xlink:href，得用v-bind:或setAttributeNS
SVG 作为 <img> 源时的常见加载失败原因
用 <img src="logo.svg"> 最省心，但失败时往往没报错，只显示 alt 文字或空白。核心问题不是“不支持 SVG”，而是 MIME 类型不对或服务器配置缺失。
立即学习“前端免费学习笔记（深入）”；
- Apache 需加
AddType image/svg+xml .svg，Nginx 要确保types { image/svg+xml svg; }存在 - 本地双击打开 HTML 文件（
file://协议）时，Chrome 会拒绝加载 SVG，报Failed to load resource: net::ERR_FAILED，这是安全限制，必须走 HTTP 服务 - Webpack 构建后 SVG 路径被哈希，但 HTML 中写的还是原始名，导致 404 —— 要么用
html-webpack-plugin注入，要么统一走require('./logo.svg')
SVG 动画和滤镜的兼容性雷区
<animate>、<set> 这类 SMIL 动画在 Chrome 73+、Firefox 73+ 已被弃用，Safari 一直不支持；而 CSS transform + transition 控制 SVG 元素则稳定得多。滤镜如 <feDropShadow> 在 Edge 18 及更早版本完全不生效，且所有浏览器对 filterUnits="userSpaceOnUse" 的解析精度不一。
- 动画优先用 CSS，仅当需要路径形变（
<path>的d属性变化）时才考虑 JS +requestAnimationFrame - 阴影效果别依赖
<feDropShadow>，改用两层<path>+opacity模拟，兼容性高且可控 - IE11 对
clipPath的url(#id)支持不稳定，建议用clip-path: inset()或clip-path: polygon()替代
真正麻烦的不是“能不能用 SVG”，而是同一份代码在不同环境里，失效点完全不同——可能是 MIME 类型、可能是协议限制、可能是某个属性拼写大小写（XLinkHref vs xlink:href），得按场景一个个过。
