用 <img> 标签加载 SVG 会模糊，因其被浏览器光栅化为位图后再缩放；唯一稳解是内联 <svg> 并配 viewBox 和弹性尺寸控制。
为什么用 <img src="icon.svg"> 会模糊
SVG 本是矢量格式，但一旦用 <img> 标签加载，浏览器就把它当位图处理：先光栅化成固定尺寸的位图，再按 CSS width/height 缩放——高 DPR 屏幕上必然插值发虚。常见现象是：在 MacBook Pro 或 Windows 高缩放（125%/150%）下，图标边缘毛糙、文字图标锯齿明显。
根本原因不是 SVG 文件本身有问题，而是加载方式切断了矢量重绘链。即使你删了 SVG 文件里的 width 和 height，<img> 依然无法触发原生矢量渲染。
- 别指望给
<img>加image-rendering: -webkit-optimize-contrast或crisp-edges来修复——这些只对位图生效，对已光栅化的 SVG 无效 -
srcset对 SVG 没意义：<img src="icon.svg" srcset="icon@2x.svg 2x">不会提升清晰度，因为所有 SVG 都是矢量，分辨率无关 - Firefox 和旧版 Safari 对
<img>中 SVG 的 viewBox 解析更脆弱，容易 fallback 到默认宽高导致比例错乱
内联 <svg> + viewBox 是唯一稳解
把 SVG 代码直接写进 HTML，配合正确的 viewBox 和弹性尺寸控制，才能让浏览器真正按物理像素重绘路径，不采样、不插值。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- SVG 文件里必须保留
viewBox="0 0 24 24"（数值按设计稿原始画布填），同时删掉width和height属性（或改成width="100%" height="100%"） - HTML 中直接内联，不要用外部引用：
<svg viewBox="0 0 24 24"><path d="..." /></svg> - CSS 中用
font-size、max-width或clamp()控制大小，例如：svg { width: 1.5em; height: 1.5em; } - 需要响应式缩放？用
width: clamp(16px, 4vw, 24px)，而不是transform: scale()—— 后者会强制重绘并模糊
用 CSS background-image 引用 SVG 的注意事项
仅限装饰性图标（如按钮背景、伪元素图标），且必须走 Data URL 路径。直接 url(icon.svg) 仍可能触发光栅化，尤其在旧版 Safari 和部分 WebView 中。
安全写法：
- SVG 源码必须精简：去掉
<?xml>声明、注释、多余空格；viewBox不可少；禁止width/height属性 - Data URL 写法：
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24'><path d='...'></svg>"); - CSS 必须配
background-size: contain或具体值（如1em 1em），不能只靠background简写——否则 fallback 行为不可控 - 若需深色模式适配，Data URL 中的
fill改用currentColor，再由父级color控制
Font Awesome 7 等图标库的响应式陷阱
FA7 默认用 <i class="fa-solid fa-home"></i>，本质是字体图标，不是 SVG。它模糊和 DPR 无关，而是字体 hinting、系统渲染策略（如 Windows ClearType）、以及 text-rendering 设置共同作用的结果。
如果你硬要用 FA7 做响应式图标，注意：
- 别用
fa-xs/fa-2x这类固定类名做断点适配——它们生成的是固定font-size，缩放时仍可能糊 - 改用自定义类 + 媒体查询：
.icon-lg { font-size: clamp(16px, 3vw, 24px); }，并确保text-rendering: optimizeLegibility关闭（它反而会让小字号更糊） - FA7 的 SVG 模式（
fa-svg）需显式启用，且必须配合内联或 JS 注入，否则仍走字体回退 - 真要跨设备保清晰，优先砍掉 FA7，改用内联 SVG —— 体积更小、控制更细、无 JS 依赖
最容易被忽略的一点：所有方案都必须在真实高 DPR 设备（不是 Chrome 模拟器）上验证。模拟器不会触发系统级光栅化路径，很多“看起来正常”的写法，一到真机就糊。
