SVG在高DPI屏缩放失真，根本原因是viewBox缺失、width/height写死或CSS控制不当触发光栅化；需三步修复：①确保viewBox存在且值匹配原始设计（如"0 0 24 24"）；②彻底删除SVG内联width/height属性；③用CSS精确控制尺寸（如width: 24px; height: 24px;），禁用background-size: cover/contain。
SVG 在高 DPI 屏上缩放失真，根本不是“矢量不够强”，而是 viewBox 缺失、width/height 写死、或 CSS 尺寸控制方式触发了浏览器的光栅化路径——只要改三处，95% 的模糊问题当场消失。
viewBox 必须存在且值匹配原始设计坐标
没有 viewBox 的 SVG，浏览器会把它当固定像素位图处理。比如导出自 Figma 的图标是 24×24 画布，viewBox 就得是 "0 0 24 24"，不能写成 "0 0 100 100" 或干脆省略。
- 用文本编辑器打开 SVG 源码，确认第一行
<svg>标签含viewBox="0 0 X Y"，X 和 Y 必须等于原始设计稿宽高 - 如果用了 Sketch/Figma 导出插件，关掉“Use Artboard Size”之类自动设宽高的选项，否则它可能把
width/height硬塞进去 - IE11 和旧版 Safari 对
viewBox解析更敏感，建议用 SVGO 清理冗余属性（如xmlns:xlink），避免干扰
删光 width 和 height 属性，让 CSS 全权接管尺寸
哪怕写成 width="100%" 或 height="24"，也会让浏览器优先按该值光栅化 SVG，再缩放——这步就糊了。Data URL 和内联 SVG 都适用这条铁律。
- 检查 SVG 源码，删掉所有
width=、height=属性（包括带单位的、带百分比的、带 em 的） - 用 CSS 控制显示尺寸：
svg { width: 24px; height: 24px; }，或响应式写法：svg { width: 1.5rem; height: auto; } - 如果父容器是 Flex/Grid，给 SVG 包一层
<div class="icon-wrapper">，并在 wrapper 上设width: 24px，避免 SVG 自身被 flex-shrink 影响
background-size 别用 cover/contain，改用精确像素值
用 background-image: url("data:image/svg+xml,...") 时，background-size: cover 是最大陷阱：它强制拉伸填充，扭曲路径比例；contain 则可能留白+居中偏移，导致点击热区错位。
立即学习“前端免费学习笔记（深入）”；
- 一律用具体值：
background-size: 24px 24px（与 viewBox 宽高一致） - 补全定位和重复：
background-repeat: no-repeat; background-position: center; - XML 特殊字符必须 URL 编码：
<→%3C，>→%3E，"→%22；漏一个就背景空白，还不报错 - 需要适配 Retina？优先用
image-set()：background-image: image-set("icon.svg" 1x, "icon@2x.svg" 2x);，注意 @2x SVG 的 viewBox 不变，但内部路径坐标要翻倍（如原 24×24，@2x 应为 48×48）
高 DPI 下仍模糊？检查是否触发了 subpixel 插值
当 border-width 是 1.5px、transform: scale(1.03)、或容器尺寸被 rem/vw 计算出小数时，WebKit 和 Blink 会启用亚像素渲染，SVG 边缘出现灰边或虚线间隙被“抹开”。
- 给 SVG 容器加
image-rendering: -webkit-optimize-contrast;（Safari）或image-rendering: crisp-edges;（Chrome/Firefox） - 避免用
scale(0.98)这类非整数倍缩放；真要微调，只用硬件友好倍数：scale(0.75)、scale(1.25)、scale(1.5) - Flex 容器中确保 wrapper 有
min-width: 0（iOS Safari 15.4 前必需），否则 SVG 卡在原始尺寸，看似没缩放，实则因未参与 flex 计算而错位
最常被忽略的一点：字体图标（如 Font Awesome）在 iOS Safari 下小于 16px 时发虚，这不是 CSS 能修的——那是 WebKit 字体渲染引擎缺陷，换 SVG 或调大字号才是正解。
