svg降级必须确保旧浏览器仅解析其支持的标签，fallback资源需静态可直访、无mime依赖；结构让ie8忽略svg但渲染image为img，xlink:href指向svg、src指向png，宽高须一致且不可省略。

SVG 降级不是“写了 fallback 就自动生效”，而是必须让旧浏览器（IE8–IE11、Android ≤4.3）只看到它能理解的标签，且 fallback 资源必须静态、可直访、无 MIME 依赖。

用 <svg><image></image></svg> 结构实现零 JS 降级

这是最轻量、兼容性最强的纯标签方案：IE8 完全忽略 <svg></svg> 标签，但会把内部的 <image></image> 当作普通 <img> 渲染，直接加载其 src 属性。

• <image></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"></image></svg>

onerror 切换 src 的写法陷阱

用 <img src="logo.svg" onerror="..."> 看似简单，但 IE9+ 也可能触发错误（MIME 错误、路径错、CORS），而 IE8 不支持 onerror 在 <img> 上——所以它根本不会执行，直接白屏或显示 alt。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须加 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，你却不知道降级发生了。

• 验证方式：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 类型不匹配、或路径依赖了动态服务。静态资源必须“扔进地址栏就能打开”，否则整个链路就断在第一步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！