SVG图标不依赖DPI，devicePixelRatio对其无影响；应保留viewBox、避免固定宽高，用em/rem单位实现字号联动缩放，禁用image-set()加载SVG。
SVG图标本身不依赖DPI，devicePixelRatio对它没影响——强行按DPR切换SVG版本是白忙活，还拖慢加载。
为什么不能用 window.devicePixelRatio 控制 SVG 加载
很多开发者看到 devicePixelRatio === 2 就立刻去换 icon@2x.svg，但SVG不是PNG。它没有“像素”，浏览器会自动用当前物理像素重采样，只要 viewBox 正确、没写死 width/height 属性，就永远清晰。
- 写
<img src="icon.svg" alt="怎样在CSS中为不同屏幕DPI配置最佳矢量SVG与图标字号" >+ JS 判断 DPR 换源 → 多一次HTTP请求，缓存碎片化，无画质提升 - 导出SVG时保留
viewBox="0 0 24 24"，删掉原始width="24"和height="24"—— 否则CSS缩放会被覆盖 - 内联SVG时，用
width="1.2em"或width="1rem"，别用px，才能随文字大小自然缩放
字号与SVG图标的尺寸联动怎么写才稳
图标和文字共用一套字号体系，是最轻量的响应式方案。但必须注意单位选择和继承关系。
- 父容器设
font-size: 16px，SVG用width="1.5em"→ 图标宽 = 24px，且随父字号线性变化 - 避免在SVG上直接写
font-size: 14px，它不控制SVG图形，只影响内部<text></text>元素 - 如果图标需独立于文字缩放（比如固定16px），用
width="16px"，但要配合height="16px"和viewBox保证比例 -
rem更适合全局统一调整，em更适合组件内相对缩放；混用时注意根元素font-size是否被UA重置
用 image-set() 配 SVG？别试了
image-set() 目前只支持位图（.png, .jpg），对 .svg 不生效。Chrome/Firefox会静默忽略SVG条目，Safari可能报解析警告。
立即学习“前端免费学习笔记（深入）”；
- 写
background-image: image-set("icon.svg" 1x, "icon.svg" 2x);→ 实际只加载第一个 - 想用背景图方式嵌SVG？老实用
@media (min-resolution: 2dppx)切换不同尺寸的PNG，SVG走内联或<img alt="怎样在CSS中为不同屏幕DPI配置最佳矢量SVG与图标字号" >即可 - 真正需要媒体查询适配的，是字体图标（如Font Awesome）的
font-size：高DPI屏可微调+1px防止渲染过细，但非必需
最容易被忽略的一点：所有内联SVG必须显式声明 width 和 height（哪怕只是 width="1em"），否则它会按 viewBox 原始尺寸（如24×24）以像素为单位渲染，脱离文字流，后续缩放、对齐全乱。
