SVG图标需删除内联width/height属性、仅保留viewBox，再用CSS设width（如百分比或clamp）和height: auto实现等比缩放；内联SVG才支持此控制，<img>引用则受限于图片规则。
用 width 和 height 百分比控制 SVG 图标尺寸
SVG 本质是 XML 文档，可直接内联或作为 <img> 引入。但只有内联 SVG 才能被 CSS 精确控制缩放行为；<img src="icon.svg"> 只能走普通图片规则（max-width: 100% + height: auto），无法响应父容器宽高比变化。
内联 SVG 的关键在于：去掉 width 和 height 属性（保留 viewBox），然后用 CSS 控制尺寸：
-
width设为百分比（如width: 24px、width: 5%或width: clamp(16px, 2.5vw, 32px)） -
height必须设为auto，否则会破坏比例 - 若父容器本身尺寸不固定（比如 Flex 项或 Grid 单元格），需确保父容器有明确的宽高约束或使用
aspect-ratio
为什么 max-width: 100% 对内联 SVG 不够用
常见错误是给内联 SVG 套一层 <div>，再对 div 写 max-width: 100%，但 SVG 自身仍带 width="24" height="24" 属性——这些属性会覆盖 CSS 的 width，导致缩放失效。
真正起效的前提是：
立即学习“前端免费学习笔记（深入）”；
- SVG 标签里**不能有**
width或height属性（只保留viewBox） - CSS 中显式设置
width（哪怕只是width: 100%），且height: auto - 父容器不能是
display: inline或未清除浮动，否则计算宽度基准可能为 0
错误示例：<svg width="24" height="24" viewBox="0 0 24 24">...</svg> → 即使加了 width: 100% 也无效。
在 Flex/Grid 容器中让 SVG 自适应等比缩放
当 SVG 放在 display: flex 或 display: grid 的子项里时，它默认不会自动撑满或等比缩放，除非你主动干预。
推荐写法：
- 给 SVG 设置
flex: 1 1 auto+max-width: 100%+height: auto（适用于 Flex 子项） - 在 Grid 中，配合
justify-self: center和align-self: center，再设width: 100%+height: auto，但需注意：若网格轨道没设minmax()或aspect-ratio，SVG 可能被压缩成一条线 - 更稳妥的做法是给 SVG 外层加一个 wrapper，并设
aspect-ratio: 1 / 1（或对应图标比例），再让 SVGwidth: 100%+height: auto
Retina 屏下 SVG 图标模糊？根本不存在这问题
这是个常见误解。SVG 是矢量图形，天生无像素密度概念，srcset 对 SVG 完全无效，也不需要 @2x 版本。
真正影响清晰度的是：
- SVG 内部路径描边过细（比如
stroke-width="0.5"），在高 DPR 下可能渲染为亚像素，看起来发虚 → 改用整数stroke-width或设shape-rendering: crispEdges - 浏览器对小尺寸 SVG 的抗锯齿策略差异 → 加
transform: translateZ(0)或will-change: transform可强制启用硬件加速渲染 - 父容器用了
transform: scale()缩放整个区域（如大屏适配方案），而 SVG 内部又写了绝对单位（如px）→ 应统一用 em、rem 或无单位数值，避免混合单位
真正要警惕的不是“模糊”，而是缩放后图标边缘出现半透明像素或文字描边抖动——那通常是单位混用或未关闭抗锯齿导致的。
