SVG能避开物理像素“凑数”问题，因其是矢量图形，stroke-width:1由设备图形引擎直接映射到单个物理像素（DPR允许时），不经过CSS像素栅格化；而CSS scale缩放的是已渲染位图，易模糊发虚。
SVG背景为什么能避开物理像素“凑数”问题
因为SVG是矢量图形，stroke-width:1在渲染时由设备图形引擎直接映射到单个物理像素（只要DPR允许），不依赖CSS像素栅格化过程。而CSS transform: scale(0.5) 是对已生成的位图做缩放，浏览器仍会把原始1px边框先铺满2×2物理像素再压缩，导致边缘模糊或发虚。
SVG background-image 的关键配置项必须写全
用background-image: url("data:image/svg+xml,")时，以下三点漏一不可：
-
viewBox属性必须存在，例如viewBox="0 0 2 2"，否则 SVG 默认按 300×150 渲染，缩放后失真 - 不能写
width或height固定值，否则会覆盖background-size控制逻辑 - XML 特殊字符如
、<code>>、"必须 URL 编码，否则整个 background 消失且无报错
正确示例：background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M0 1h2' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E");
scale伪类方案在圆角/渐变/阴影场景下容易露馅
当你给一个带 border-radius: 4px 的元素用 ::before + transform: scaleY(0.5) 模拟1px底边时，缩放会扭曲圆角弧度，且无法继承父元素的 box-shadow 或 background: linear-gradient。SVG背景则完全独立，只控制线条本身，和容器样式零耦合。
立即学习“前端免费学习笔记（深入）”；
安卓低端机上 SVG 方案比 0.5px 更稳
很多 Android 低版本 WebView（如 Android 6–8 的系统 WebView）会把 border-width: 0.5px 当作无效值降级为 0px，但 SVG 的 stroke-width 在所有现代 WebView 中都按规范解析。不过要注意：部分老旧 UC 内核（已基本淘汰）不支持 Data URL 中的 SVG，生产环境建议加 fallback。
真正容易被忽略的是 SVG 的描边对齐方式——默认是居中对齐，若要让线条完全落在元素边界内侧，得加 shape-rendering: crispEdges 并手动调整 path 坐标，否则在某些 DPR=3 设备上仍可能有半像素偏移。
