svg在高清屏下本该更清晰，因其记录绘图指令而非像素点阵，浏览器按dpr重算路径实现整数坐标渲染；关键需声明viewbox、禁用transform缩放、优先内联、使用整数坐标，否则易退化为位图导致模糊。
SVG在高清屏（如Retina、2x/3x DPR设备）下天然具备清晰显示能力，但“看起来锐利”不等于“自动无损”，关键在于是否维持了矢量渲染路径——一旦被当作位图处理，就会模糊或出现亚像素失真。
为什么SVG在高清屏下本该更清晰
SVG记录的是绘图指令（比如“画一个圆心在(50,50)、半径40的红色圆”），而非像素点阵。浏览器在高DPR屏幕上会按物理像素重算路径，直接输出整数级坐标渲染，不依赖缩放插值。这就决定了它无需@2x/@3x资源，放大10倍依然边缘平滑、文字可读、线条无锯齿。
真正影响清晰度的几个实操细节
实际开发中，模糊往往不是SVG本身的问题，而是容器、样式或导出方式干扰了原生矢量流程：
- 必须声明viewBox：没有viewBox时，浏览器可能按固定像素尺寸拉伸，触发光栅化；加上viewBox="0 0 w h"才能让SVG响应式缩放且保持矢量计算。
- 避免用transform: scale()：CSS缩放会让浏览器对已渲染的SVG做二次采样，产生模糊；应改用width/height配合viewBox控制尺寸。
-
优先内联SVG，慎用img标签：用
时，若父容器设了非整数宽高，或SVG未定义viewBox，容易退化为位图渲染；内联SVG可直接操作DOM、绑定样式、适配上下文。 - 导出时用整数坐标和简洁路径：设计工具导出SVG时开启“精简代码”“四舍五入坐标”，避免小数坐标引发亚像素渲染；复杂贝塞尔曲线尽量简化，减少渲染压力。
对比其他方案：为什么比iconfont和PNG更可靠
iconfont在16px以下或Chrome中常出现明显锯齿，本质是字体渲染引擎对小字号弧线的灰度/次像素处理缺陷；PNG等位图则必须提供多倍尺寸资源，增加HTTP请求数和维护成本。SVG绕开了这两类限制：它走图形渲染管线，不受字体Hinting影响，也不依赖像素密度匹配，只要写法规范，就能在所有现代浏览器里稳定输出 crisp edges。
一个验证是否真正矢量渲染的小技巧
打开开发者工具，选中SVG元素，查看Computed面板里的“Rendered size”和“Actual size”。如果两者比例严格等于devicePixelRatio（如2.0），且元素内部没有image或filter等触发光栅化的属性，基本就是纯矢量渲染了。
