加 width/height 会让 SVG 图标变糊，因为 img 标签将 SVG 当作位图光栅化后再缩放，而非实时重绘矢量路径；正确做法是内联 SVG 并用 CSS 控制尺寸，确保 viewBox 存在且无固定宽高。
为什么 img 加 width/height 会让 SVG 图标变糊
SVG 本身是矢量格式，缩放不该模糊——但浏览器对 <img src="icon.svg" alt="CSS如何优化移动端图标模糊问题_使用SVG结合CSS尺寸控制" > 的渲染逻辑和位图一致：它会先按原始尺寸（比如 24×24）光栅化，再拉伸。加 width 和 height 属性只是强制缩放这个光栅结果，不是重绘矢量路径。
- 典型现象：
<img src="arrow.svg" style="max-width:90%" style="max-width:90%" alt="CSS如何优化移动端图标模糊问题_使用SVG结合CSS尺寸控制" >在 Retina 屏上边缘发虚、文字锯齿明显 - 根本原因：SVG 被当“图片”处理，丢失了可缩放上下文
- 正确做法是让 SVG 直接参与 CSS 布局，而不是靠
img标签包裹
用 <svg></svg> 内联替代 <img alt="CSS如何优化移动端图标模糊问题_使用SVG结合CSS尺寸控制" > 并控制尺寸
把 SVG 内容直接写进 HTML，就能让浏览器按当前 CSS 尺寸实时重绘矢量图形，100% 清晰。
- 保留原 SVG 的
viewBox（必须有！否则缩放失效），删掉width/height属性 - 用 CSS 控制尺寸：
svg { width: 24px; height: 24px; }或svg { width: 1.5em; height: 1.5em; } - 避免设置
font-size在父容器上影响 SVG 内部em单位，如需精确控制，改用px或rem - 内联后可直接用 CSS 修改
fill、stroke，比<img alt="CSS如何优化移动端图标模糊问题_使用SVG结合CSS尺寸控制" >灵活得多
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7 10l5 5 5-5z"/> </svg>
background-image 用 SVG Data URL 需注意缩放行为
用 background-image: url("data:image/svg+xml,...") 是常见方案，但它默认不自动缩放——即使设了 background-size，也可能因 SVG 内部无 viewBox 导致拉伸失真。
- 必须确保 Data URL 中的 SVG 包含
viewBox，且不含固定width/height -
background-size: contain或cover在小图标场景容易留白或裁切，优先用具体值：background-size: 24px 24px - 编码时注意：XML 特殊字符（如
、<code>>、"）要 URL 编码，否则解析失败，表现为背景消失 - 兼容性没问题，但调试困难——出错时浏览器不会报错，只会显示空白
第三方图标库（如 Font Awesome、Iconify）的模糊陷阱
很多库默认输出 <i class="icon"></i> + 字体或 SVG Sprite，看似方便，但移动端易糊。
立即学习“前端免费学习笔记（深入）”；
- 字体图标：依赖字体渲染引擎，在 iOS Safari 上常出现抗锯齿异常，尤其小于 16px 时；禁用
-webkit-font-smoothing可能适得其反 - SVG Sprite：若用
<use href="#icon-home"></use>但父容器没设width/height，SVG 会按 300×150 默认尺寸渲染，再被 CSS 缩放——照样糊 - 稳妥做法：统一用内联 SVG，并在构建时通过工具（如
svgr）自动注入viewBox、剥离多余属性 - 如果必须用图标库，检查其文档是否提供 “inline SVG” 模式，并关闭所有自动尺寸注入逻辑
最麻烦的不是怎么写，而是排查：同一个 SVG 文件，在 <img alt="CSS如何优化移动端图标模糊问题_使用SVG结合CSS尺寸控制" > 里糊，在 <svg></svg> 里清，说明问题不在文件本身，而在加载方式和上下文尺寸继承。别急着换图标，先看它是怎么被塞进页面的。
