SVG在Retina屏下默认高清不锯齿，因其为矢量格式，由浏览器按DPR实时重绘路径；但若被当作位图缩放、CSS强制变形或引入方式不当（如background-image配contain），仍会模糊失真。
SVG图标在Retina屏下默认就是高清的，根本不会出现锯齿——前提是它没被当成位图用、也没被CSS强制缩放变形。
为什么SVG在Retina屏下不锯齿
SVG是矢量格式，浏览器渲染时根据当前设备像素比（window.devicePixelRatio）实时重绘路径，不依赖固定像素网格，因此缩放、放大、DPR=2/3下都保持边缘锐利。这和PNG/JPG这类位图有本质区别：位图靠插值拉伸就会糊或锯齿，而SVG没有“原始分辨率”这个概念。
常见错误现象：
- 明明用了
<img src="icon.svg" alt="如何解决移动端图标在Retina屏下锯齿严重问题_使用CSS引入SVG矢量图标" >，但在iPhone上边缘发虚 - 用
background-image: url(icon.svg)配了background-size: contain，结果线条变粗、拐角模糊 - 把SVG塞进
<object></object>或<iframe></iframe>后，父容器加了transform: scale(0.8)，锯齿立刻出现
SVG引入方式决定是否保真
不是所有引入SVG的方式都等效。关键看浏览器是否把它当「可缩放矢量」处理，还是当作一张“图片”去缩放。
立即学习“前端免费学习笔记（深入）”；
-
<img src="x.svg" alt="如何解决移动端图标在Retina屏下锯齿严重问题_使用CSS引入SVG矢量图标" >：最稳妥，原生支持，自动适配DPR，无需额外CSS -
<svg><path d="..."></path></svg>（内联）：完全可控，可直接用CSS控制fill、stroke-width，但需注意viewBox和宽高设置是否匹配 -
background-image: url(x.svg)：危险！background-size若设为100% 100%或contain，会触发栅格化缩放，丢失矢量特性；必须配background-size: auto且容器尺寸与SVG原始比例一致 -
<use href="#icon"></use>（symbol引用）：依赖<svg></svg>定义块是否在DOM中，且需确保width/height未被CSS覆盖为非整数值
容易被忽略的CSS干扰项
即使用了<img alt="如何解决移动端图标在Retina屏下锯齿严重问题_使用CSS引入SVG矢量图标" >引入SVG，以下CSS仍可能悄悄破坏清晰度：
- 给
img设了max-width: 100%+ 父容器flex布局，导致实际渲染宽度是小数像素（如23.33px），触发亚像素抗锯齿 - 写了
image-rendering: pixelated或crisp-edges——这些属性对SVG无效，还可能干扰浏览器默认渲染策略 - 父元素有
transform: translateZ(0)或will-change: transform，强制开启GPU合成，某些安卓WebView下会把SVG光栅化成位图再渲染 - 用Tailwind等框架时，
class="w-5 h-5"生成的是width: 1.25rem; height: 1.25rem，若SVG内部viewBox="0 0 24 24"，则等比缩放后坐标系非整数，细线渲染失真
需要手动干预的边界场景
绝大多数情况，直接用<img src="icon.svg" alt="如何解决移动端图标在Retina屏下锯齿严重问题_使用CSS引入SVG矢量图标" >就够了。但遇到以下情况，得额外处理：
- SVG里用了
<text></text>标签：iOS Safari对SVG文本渲染较弱，建议转为<path></path>导出，或改用系统字体+font-smooth: auto - 图标要响应主题色（比如深色模式切换fill颜色）：必须用内联
<svg></svg>或<use></use>，<img alt="如何解决移动端图标在Retina屏下锯齿严重问题_使用CSS引入SVG矢量图标" >无法通过CSS修改内部样式 - 构建工具（如Vite）把
.svg当资源处理并哈希重命名，但background-image里的URL未被识别：此时别用CSS引入，改用<img alt="如何解决移动端图标在Retina屏下锯齿严重问题_使用CSS引入SVG矢量图标" >或内联 - 安卓低端机（如Android 7 WebView）对SVG渐变或滤镜支持差：先检测
SVGElement支持性，降级为PNG fallback
真正麻烦的从来不是SVG本身，而是你把它放在什么上下文里、又用什么方式去“动”它。
