直接写会导致SVG被当位图缩放而模糊；正确做法是删除HTML中width/height属性，仅用CSS控制尺寸，确保SVG含viewBox且无内联宽高。
SVG 怎么用 width/height 属性才不会糊
直接写 <img src="icon.svg" style="max-width:90%" style="max-width:90%" alt="HTML怎么让矢量图片自适应高清显示屏" > 是最常见也最危险的写法——它会把 SVG 当作位图处理，强制缩放到 24×24 CSS 像素，DPR=2 时实际只渲染 12×12 物理像素，结果就是发虚。SVG 的自适应核心是「不锁内联尺寸」。
正确做法：
- 彻底删掉 width 和 height 这两个 HTML 属性
- 只用 CSS 控制显示尺寸：svg { width: 24px; height: auto; } 或 width: 1.5rem;
- 如果是响应式图标，优先用 max-width: 100%; height: auto;，并确保父容器有宽度参照
- 避免在 SVG 文件内部写 viewBox 外的 width/height（比如 Figma 导出时勾选了「固定尺寸」）
SVG 作为 background-image 时怎么适配高分屏
用 CSS background-image 加 SVG，比 <img alt="HTML怎么让矢量图片自适应高清显示屏" > 更可控，但必须避开两个坑：
- 不要用 background-size: contain; 或 cover; 配合固定宽高的容器——这会让浏览器按 CSS 像素缩放 SVG，失去矢量优势
- 必须显式声明 background-size 为具体值，例如 background-size: 24px 24px;，或用 1em 1em 这类相对单位
- 若需多倍图 fallback（极少见），可配合 @supports (-webkit-background-clip: text) 检测，但纯 SVG 场景几乎不需要
示例安全写法：.icon { background: url("logo.svg") no-repeat center / 24px auto; }
注意：这里的 / 24px auto 是 background-size 缩写，不是除法
内联 SVG（<svg></svg>）怎么保持清晰又响应式
内联 SVG 是高清适配最稳的方案，但容易因 viewBox 和容器逻辑错位而变形：
- 必须带 viewBox，且值要匹配原始设计尺寸（如 viewBox="0 0 24 24"）
- 容器不要设死 width/height，改用 max-width + aspect-ratio（如 aspect-ratio: 1/1;）
- 禁止给 <svg></svg> 写 width 或 height 样式，否则覆盖 viewBox 缩放逻辑
- 如需等比缩放到父容器宽度，只写 width: 100%; height: auto; —— 浏览器会根据 viewBox 自动算高度
- 若嵌在 Flex/Grid 里撑开布局，加 min-width: 0; 到 SVG 外层容器，否则 flex 默认的 min-width: auto 会阻止收缩
为什么 srcset 对 SVG 几乎没用
srcset 是为位图（PNG/JPG/WebP）按 DPR 或视口宽度选不同物理分辨率版本设计的；SVG 是矢量，单文件天生适配任意 DPR。
立即学习“前端免费学习笔记（深入）”；
所以：
- 不要写 <img src="icon.svg" srcset="icon.svg 1x, icon@2x.svg 2x" alt="HTML怎么让矢量图片自适应高清显示屏" > —— 毫无意义，还可能触发重复请求
- 也不要指望 Webpack/Vite 自动产出 @2x.svg —— SVG 没“2x”概念
- 唯一需要多版本 SVG 的场景：设计稿本身有不同复杂度（比如简化版用于小尺寸图标），这时应手动命名并用 <picture></picture> 切换，而非依赖 DPR
真正该检查的是：你的 SVG 文件里有没有内嵌位图（<image href="xxx.png"></image>）？如果有，那部分才需要 srcset 或 @2x fallback。
最难的不是让 SVG 清晰，而是判断它到底是不是真 SVG——很多所谓 “SVG” 实际是导出时被栅格化的伪 SVG，打开源码能看到 <image></image> 标签或大量 <path d="..."></path> 路径异常臃肿。这种文件再怎么调 CSS 也救不回清晰度。
