SVG在高DPI屏模糊主因是加载方式或CSS不当切断矢量重绘链：写死宽高、background-size设像素值均导致光栅化；用background-image时须同时声明background-image、repeat、size（contain）、position四属性；SVG文件必须含整数viewBox且路径坐标为整数。
SVG 图标在高 DPI 屏上模糊，基本不是 SVG 本身的问题，而是加载方式或 CSS 控制不当切断了矢量重绘链。直接用 width/height，或用 background-size 强制像素值，都会让浏览器把它当位图处理。
用 background-image 加载 SVG 时必须写的四行样式
把 SVG 当背景图是最稳妥的矢量图标方案，但漏掉任意一项就会糊、错位或不显示：
-
background-image: url("icon.svg")—— 路径必须带引号，且不能是构建工具别名（如@/assets/icon.svg） -
background-repeat: no-repeat—— 不加会平铺，小图标瞬间占满整个容器 -
background-size: contain—— 推荐首选；100% 100%仅当容器宽高比 = SVG 的viewBox宽高比时才安全 -
background-position: center—— 避免因默认左上对齐导致图标偏移
错误示例：background-size: 24px 24px —— 这等于告诉浏览器“按位图拉伸”，矢量优势全丢。
为什么 ![]()
标签加载 SVG 一定会糊
即使 SVG 源文件完全合规，
viewBox 渲染成固定尺寸位图，再缩放。DPR > 1 时插值模糊不可避免。
- ✅ 正确写法：
width: 2em; height: auto;） - ⚠️ 即使删掉 HTML 中的
width/height，只要 CSS 里写了width: 120px，依然可能糊——关键看是否破坏 viewBox 缩放逻辑 对 SVG 无效： srcset="logo@2x.svg 2x"不提升清晰度，因为所有 SVG 都是分辨率无关的
border-image 用 SVG 边框糊了？检查 viewBox 和坐标
SVG 作 border-image 时模糊，90% 是源文件问题：
- SVG 必须有
viewBox="0 0 X Y"（X/Y 为整数），且内部路径坐标全为整数（如d="M0,0 L10,0"，不能是M0.5,0.5） -
border-width尽量用整数值（1px、2px），避开缩放后产生的非整数（如系统缩放 125% 时1.6px） - 加
image-rendering: crisp-edges（Chrome/Firefox）或-webkit-optimize-contrast（Safari），强制禁用插值
注意：image-rendering 只对 border-image 的 SVG 贴图生效，对普通 background-image 无效。
Firefox 不支持 image-set()？那就别用
截至 2026 年 11 月，Firefox 仍静默丢弃整条 image-set() 声明，连 fallback 都不触发。想兼容它，只能放弃该函数：
- 改用媒体查询 + 多层
background-image声明（url()在前，image-set()在后） - 确保每条声明都配好
background-size: contain和background-repeat: no-repeat - 别指望
image-set()解决“小屏高 DPR vs 大屏低 DPR”问题——它只认 DPR，不看视口宽度
真正容易被忽略的是：SVG 文件本身是否包含 viewBox。没有它，任何 CSS 优化都白搭——浏览器根本不知道怎么缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
