SVG降级必须确保旧浏览器仅解析其支持的标签，fallback资源需静态可直访、无MIME依赖；<svg><image>结构让IE8忽略svg但渲染image为img，xlink:href指向SVG、src指向PNG，宽高须一致且不可省略。
SVG 降级不是“写了 fallback 就自动生效”，而是必须让旧浏览器（IE8–IE11、Android ≤4.3）只看到它能理解的标签，且 fallback 资源必须静态、可直访、无 MIME 依赖。
用 <svg><image> 结构实现零 JS 降级
这是最轻量、兼容性最强的纯标签方案：IE8 完全忽略 <svg> 标签，但会把内部的 <image> 当作普通 <img> 渲染，直接加载其 src 属性。
-
<image>的xlink:href必须指向 SVG（现代浏览器用），src必须指向 PNG/JPEG（IE8– 用），两者宽高属性（width/height）必须一致，否则布局错位 - 不要省略
width和height——IE8 不解析 viewBox，靠这两个属性撑开容器 - iOS 3–4 原生浏览器支持
<img src="x.svg">但不支持 inline SVG，所以该方案在它们上会降级为 PNG，属已知限制，无需强求 - 示例：
<svg width="48" height="48"> <image xlink:href="icon.svg" src="icon.png" width="48" height="48" /> </svg>
onerror 切换 src 的写法陷阱
用 <img src="logo.svg" onerror="..."> 看似简单，但 IE9+ 也可能触发错误（MIME 错误、路径错、CORS），而 IE8 不支持 onerror 在 <img> 上——所以它根本不会执行，直接白屏或显示 alt。
- 必须加
this.onerror = null，否则 fallback 图也 404 时静默失败，不报错也不重试 - fallback 路径不能带查询参数（如
logo.png?format=png），IE8 对 URL 解析极弱，容易截断或 400 - 推荐 fallback 用 base64 内联 SVG：
data:image/svg+xml,%3Csvg%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%3E%3Crect%20width=%2248%22%20height=%2248%22%20fill=%22%23eee%22/%3E%3C/svg%3E - 错误写法：
onerror="fallback()"（函数未定义 → 整个事件处理器失效）
服务端 MIME 类型配错导致降级静默失效
哪怕 HTML 写得完全正确，只要服务器返回 logo.svg 时 header 是 Content-Type: text/plain 或空，Chrome/Firefox 就会跳过该资源，连 onerror 都不触发——用户只看到 fallback，你却不知道降级发生了。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 验证方式：DevTools → Network → 点开 SVG 请求 → 检查 Response Headers 中
Content-Type是否为image/svg+xml - Nginx 配置需显式添加：
types { image/svg+xml svg; } - CDN（如 Cloudflare、阿里云）要确保透传
Accept头，并对.svg后缀启用正确 MIME 类型 - 本地双击打开
file://协议 HTML 时，所有浏览器都会忽略type和onerror，务必用python3 -m http.server启服务测试
CSS background-image 多背景渐进增强
适合图标类、装饰类 SVG，不依赖语义，且能绕过 JS 执行时机问题。核心是利用“支持多背景 = 几乎必然支持 SVG”这一经验事实。
- 写法：
.icon { background-image: url(fallback.png); background-image: url(icon.svg), none; } - 第一行是所有浏览器都认的兜底；第二行中，不支持多背景的浏览器（IE8–）直接忽略整条声明，继续用第一行；支持的则用 SVG
- 不能写成
background-image: url(icon.svg), url(fallback.png)——这会同时加载两个资源，浪费带宽 - 慎用
calc()或变量（--svg-url）参与 background 声明，IE11 及以下不支持
真正卡住降级效果的，往往不是写法本身，而是 fallback 图片的尺寸元数据缺失、MIME 类型不匹配、或路径依赖了动态服务。静态资源必须“扔进地址栏就能打开”，否则整个链路就断在第一步。
