根本原因不是缩放，而是viewbox缺失或width/height写死；必须确保svg含合理viewbox（如"0 0 24 24"）、删尽width/height属性、xml字符url编码，并用精确background-size替代cover/contain。
SVG图标失真，根本不是缩放的问题，而是 viewBox 缺失或 width/height 写死
移动端 SVG 图标模糊、拉伸、边缘锯齿，90% 情况下不是浏览器渲染问题，而是 SVG 源码本身没写对。用 background-image: url("data:image/svg+xml,...") 时，如果原始 SVG 没带 viewBox，或者硬写了 width="24" 和 height="24"，那 CSS 的 background-size 就完全失效——浏览器会先按固定尺寸 rasterize（光栅化），再缩放位图，必然糊。
必须确保 Data URL 中的 SVG 同时满足：
-
viewBox存在且值合理，例如viewBox="0 0 24 24" - 删掉所有
width、height属性（哪怕设成100%也不行） - XML 特殊字符必须 URL 编码：
→ <code>%3C，>→%3E，"→%22；漏编码会导致背景直接空白，且无任何报错提示
background-size: cover / contain 在小图标上基本是陷阱
给 24×24px 的图标容器设 background-size: cover，结果图标被强行填满、变形、关键路径扭曲——这不是 bug，是它本来的设计逻辑。小图标场景几乎不需要等比“填满”或“完整显示”，你需要的是精确控制尺寸和比例。
正确做法是放弃 cover 和 contain，改用具体像素值：
-
background-size: 24px 24px—— 简单、可控、兼容性好 - 配合
background-repeat: no-repeat和background-position: center - 如果要适配高清屏，优先用
image-set()：background-image: image-set("icon.svg" 1x, "icon@2x.svg" 2x);注意：@2x SVG 必须是原 viewBox 下物理尺寸翻倍（如 48×48），不是用 CSS 放大出来的
字体图标在 iOS Safari 上小于 16px 时糊，别硬扛
用 Font Awesome 或类似库的 <i class="fa-solid fa-trash"></i>，在 iPhone 上显示为 14px 图标时，常出现抗锯齿异常、边缘发虚。这不是你 CSS 写错了，是 WebKit 字体渲染引擎对小字号字体图标的处理缺陷。
临时缓解方案效果有限，真正可靠的解法是切换载体：
- 禁用
-webkit-font-smoothing可能更糊，不推荐 - 把字体图标替换成内联 SVG：
<svg viewbox="0 0 24 24"><path d="..."></path></svg>，并移除所有 width/height - 若必须用字体，至少保证最小尺寸 ≥ 16px，并加
transform: scale(0.9)微调（但不如换 SVG 彻底）
第三方图标库的 SVG Sprite 容器没设宽高，等于白配
像 Iconify 或自建 SVG Sprite，用 <use href="#icon-home"></use>，但父级 <svg></svg> 元素没写 width 和 height，浏览器就会按默认 300×150 渲染，再靠 CSS 缩放到 24×24——这一步就是失真的根源：先放大再缩小，两次采样。
必须显式声明容器尺寸：
<svg width="24" height="24" viewbox="0 0 24 24"><use href="#icon-home"></use></svg>- 或者用 CSS 控制：
svg { width: 24px; height: 24px; vertical-align: middle; } - 切勿只写
svg { width: 1em; }而不设height，否则 aspect-ratio 不保，尤其在 flex 布局中易塌陷
最易被忽略的一点：SVG Sprite 文件里每个 <symbol></symbol> 的 viewBox 必须统一且精准。混用不同 viewBox（比如有的是 "0 0 16 16"，有的是 "0 0 24 24"），即使容器尺寸一致，渲染比例也会错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
