响应式布局中 SVG 图标在 Safari 下模糊的根源与修复

在移动端项目里用 SVG 做图标已经是很常规的做法，但最近在 iPhone 12 和 iPad 上遇到一个怪现象：同一套 SVG 图标，在 Chrome 和 Android 设备上边缘清晰锐利，但在 Safari 中却有一层明显的模糊，尤其在图标尺寸不是整数倍缩放时更严重。这个问题通常出现在使用 viewBox 加百分比宽高的场景，比如图标放在 Flex 容器里随容器缩放，或者通过 CSS 设置