SVG在高DPI屏失真是因浏览器误入光栅化路径：1. 缺失或不匹配viewBox导致坐标系失效；2. width/height属性强制光栅化；3. 路径含小数坐标引发插值模糊。
SVG图标在移动端高DPI屏幕下用CSS缩放失真，根本不是“矢量不够强”，而是浏览器被错误引导进了光栅化路径——只要三处关键配置出错，清晰度就当场崩塌。
viewBox缺失或值不匹配导致坐标系失效
没有viewBox的SVG，浏览器会按固定像素画布处理，比如原始设计是24×24，你用width: 48px拉伸，它就把24×24的位图硬拉成48×48，路径坐标没重算，自然偏移、变形。
- 打开SVG源码，确认
<svg>标签含viewBox="0 0 X Y"，X和Y必须等于原始设计稿宽高（如Figma导出默认是"0 0 24 24"） - 避免用Sketch/Figma插件自动塞进
width="24"或height="24"——关掉“Use Artboard Size”类选项 - IE11和旧Safari对
viewBox解析更敏感，建议用SVGO清理冗余属性（如xmlns:xlink）
width/height属性触发强制光栅化
哪怕只写width="100%"或height="24"，浏览器也会优先按该值光栅化SVG，再缩放——这一步就糊了。Data URL和内联SVG都适用这条铁律。
- 用文本编辑器或正则批量删掉所有
width=、height=属性（包括带单位、百分比、em的） - 尺寸控制全交给CSS：
svg { width: 24px; height: 24px; }或响应式写法：svg { width: 1.5rem; height: auto; } - Flex/Grid容器中，
<svg>本身不响应flex-shrink，真正要设的是包它的<div class="icon-wrapper">
CSS缩放方式选择直接影响渲染路径
用transform: scale()缩放SVG，浏览器需重新计算变换矩阵并重绘；而直接改width/height或viewBox，通常只触发重排，性能更好、边缘更锐利。
立即学习“前端免费学习笔记（深入）”；
- 测试数据：对100个SVG做0.5倍缩放，
transform: scale(0.5)平均耗时28ms，width: 12px仅9ms - 若必须用
transform，务必配transform-origin: top left（尤其左对齐场景），否则缩放中心偏移会引发视觉错位 - 高DPI屏上慎用
image-rendering: crisp-edges——它对<img>有效，但对内联<svg>基本无影响；真正起效的是shape-rendering="crispEdges"加在<svg>标签上
最容易被忽略的点：很多开发者以为删了width/height就万事大吉，却忘了检查SVG内部路径是否用了小数坐标（如d="M0.5,0.5"）。在DPR=2的屏幕上，这种半像素起点会直接触发浏览器插值采样，路径边缘立刻发虚——整数坐标才是高DPI下保持锐利的底层前提。
