SVG降级需严格遵循浏览器解析顺序与CSS层叠规则：IE8以下必须用<svg><image src="png" xlink:href="svg"/></svg>；多背景回退应写为background-image: url(png); background-image: url(svg), none；<picture>需用type="image/svg+xml"并配物理尺寸翻倍的@2x PNG。
SVG 降级不是“加个 fallback 就完事”，关键在浏览器解析顺序和 CSS 层叠规则。直接写 background-image: url(icon.png), url(icon.svg) 会失效——旧 IE 不认识多背景，但也不会忽略整条声明，而是直接丢弃整行，导致无图显示。
IE8 及以下必须用 <image> 嵌套降级
这是唯一能穿透 IE8 渲染引擎的方案：IE8 完全不解析 <svg> 标签，但它会把 <image> 当作普通 <img> 处理。
- 写法必须严格：
<svg width="24" height="24"><image xlink:href="icon.svg" src="icon.png" width="24" height="24" /></svg> -
xlink:href是 SVG 属性，src是 HTML 属性，IE8 忽略前者、读取后者；现代浏览器优先用xlink:href - 不能省略
width/height，否则 IE8 下<image>渲染为 0×0 - 注意：Chrome 98+ 已废弃
xlink:href，改用href，但为兼容旧环境仍需保留xlink:href
@supports 在旧浏览器里根本不可靠
@supports (background-image: svg) 这种写法在 IE11 及以下、Android 4.3 WebView 中会直接报语法错误，导致整个 CSS 规则被跳过，连 PNG 回退都加载不了。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 真正可用的是多背景检测：
.icon { background-image: url(icon.png); background-image: url(icon.svg), none; } - 原理：支持多背景（
background-image: a, b）的浏览器，100% 支持 SVG 作为背景；不支持多背景的（如 IE9），会忽略第二行，回退到第一行 PNG - 别用
linear-gradient(transparent, transparent)替代none，某些 Android 2.x 会误解析 SVG 路径
<picture> + <source> 是高清屏场景的最优解
当你要兼顾 Safari 12-、旧安卓 WebView 和 Retina 屏时，<picture> 比 JS 判断更轻量、更早触发资源加载。
立即学习“前端免费学习笔记（深入）”；
- 结构必须这样写：
<picture><source srcset="icon.svg" type="image/svg+xml"><img src="icon@2x.png" srcset="icon@2x.png 2x, icon@3x.png 3x" alt=""></picture> -
type="image/svg+xml"是关键，Safari 10.1+、Chrome 37+ 才识别；不支持的浏览器直接跳过<source>，走<img>回退 -
srcset里的@2xPNG 必须是物理尺寸翻倍（比如设计稿 24×24，则 PNG 应为 48×48），否则在 DPR=2 屏上依然模糊 - 不要给
<img>加onerror，<picture>本身已内置错误兜底逻辑
最容易被忽略的是 viewBox 和宽高单位混用问题：如果 SVG 文件里只写了 viewBox="0 0 100 100" 却没设 width/height，IE9– 会按 300×150 渲染，导致图标被拉伸。所有用于降级的 SVG 文件，必须显式声明像素宽高或使用 preserveAspectRatio 控制缩放行为。
