SVG图标清晰度与devicePixelRatio无关，因其分辨率无关，浏览器会自动重采样；强行按DPR切换SVG版本反而增加请求和缓存碎片；真正需适配DPR的是位图图标。
为什么window.devicePixelRatio不能直接用来切换SVG图标
很多开发者看到高DPR（比如2或3）就立刻想“该换高清位图了”，但这个思路在SVG场景下是反效果的。SVG本身是分辨率无关的，devicePixelRatio对它不构成渲染质量影响——浏览器会自动用当前设备的物理像素重采样SVG，无需你手动干预。强行根据DPR加载不同版本的SVG（比如icon.svg?dpr=2）反而增加HTTP请求、缓存碎片化，且无实际收益。
真正需要响应DPR的，是那些仍被当作<img src="icon.png" alt="CSS如何根据屏幕像素密度优化图标_使用SVG矢量图替代位图渲染" >使用的位图图标。这时候才该用srcset或CSS媒体查询做适配。
用<svg></svg>内联替代<img alt="CSS如何根据屏幕像素密度优化图标_使用SVG矢量图替代位图渲染" >加载SVG图标的三个实操要点
内联SVG（即把SVG代码直接写进HTML）是提升图标可控性与性能的最简路径，但容易忽略几个关键细节：
- 必须显式设置
width和height属性（哪怕只是width="1em"），否则SVG可能按原始视图尺寸（如viewBox="0 0 24 24"）渲染为24px×24px，不受父容器字号或缩放影响 - 移除SVG源码中的
width/height属性（保留viewBox），否则会与CSS冲突；常见错误是直接复制Figma导出的SVG，它常带固定宽高 - 如果图标需响应文字大小，优先用
em或rem单位，而非px——例如<svg width="1.2em" height="1.2em" viewbox="0 0 24 24"></svg>
CSS媒体查询中resolution只适用于位图，别用在SVG上
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)这类写法，本质是告诉浏览器：“当前设备逻辑像素密度≥2x时，请启用这段样式”。但它只对位图资源（如background-image: url(icon@2x.png)）有意义。对SVG，无论是否命中该媒体查询，渲染结果都一样清晰。
立即学习“前端免费学习笔记（深入）”；
如果你发现高DPR下SVG边缘模糊，问题几乎一定出在：
- SVG自身
path描边未对齐像素网格（比如stroke-width: 1.5），应改用整数或stroke-linecap: round柔化 - 父容器触发了非整数缩放（如
transform: scale(1.3)），导致SVG被插值重采样 - 使用了
filter: drop-shadow()等合成操作，间接引发亚像素渲染
当必须用<img alt="CSS如何根据屏幕像素密度优化图标_使用SVG矢量图替代位图渲染" >加载SVG时，如何避免IE11兼容性崩坏
现代项目基本可放弃IE11，但如果真要支持，注意：<img src="icon.svg" alt="CSS如何根据屏幕像素密度优化图标_使用SVG矢量图替代位图渲染" >在IE11中无法正确继承父元素颜色（fill: currentColor失效），也无法响应CSS transform缩放（会拉伸失真）。此时必须：
- 给
<img alt="CSS如何根据屏幕像素密度优化图标_使用SVG矢量图替代位图渲染" >加class="icon"，并用CSS强制重置尺寸：.icon { width: 1em; height: 1em; vertical-align: middle; } - 避免依赖SVG内部的
fill="currentColor"，改为用background-image+background-size方式加载SVG，并用background-color模拟颜色变化（局限：仅支持单色图标） - 若需多色或动态着色，唯一可靠方案是内联SVG——IE11完全支持
<svg></svg>标签及fill继承
高DPR设备下的图标清晰度，从来不是“换图”问题，而是“怎么用SVG”的问题。最容易被忽略的，其实是SVG的viewBox与容器尺寸之间的比例关系——哪怕只差0.1，都可能导致浏览器用非整数倍数重绘，从而引入轻微模糊。
