直接写会导致SVG被当位图缩放而模糊；正确做法是删除HTML中width/height属性，仅用CSS控制尺寸，确保SVG含viewBox且无内联宽高。
SVG 怎么用 width/height 属性才不会糊
直接写 
正确做法：
- 彻底删掉 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，比
- 不要用 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 是高清适配最稳的方案，但容易因 viewBox 和容器逻辑错位而变形：
- 必须带 viewBox，且值要匹配原始设计尺寸（如 viewBox="0 0 24 24"）
- 容器不要设死 width/height，改用 max-width + aspect-ratio（如 aspect-ratio: 1/1;）
- 禁止给 写 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。
所以：
- 不要写
- 也不要指望 Webpack/Vite 自动产出 @2x.svg —— SVG 没“2x”概念
- 唯一需要多版本 SVG 的场景：设计稿本身有不同复杂度（比如简化版用于小尺寸图标），这时应手动命名并用
真正该检查的是：你的 SVG 文件里有没有内嵌位图（srcset 或 @2x fallback。
最难的不是让 SVG 清晰，而是判断它到底是不是真 SVG——很多所谓 “SVG” 实际是导出时被栅格化的伪 SVG，打开源码能看到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
