SVG 本身即可适配 Retina 屏，因其为矢量格式，浏览器按设备像素比实时重绘路径；正确做法是使用 background-size: contain 或 100% 100%（需容器宽高比匹配 viewBox），配合 background-repeat: no-repeat 和 background-position: center，避免写死尺寸或强制拉伸破坏矢量特性。
直接用 svg 文件当背景图，配合 background-size: contain 和 background-repeat: no-repeat，就能在所有高分屏上保持清晰——不用切 @2x、不用媒体查询、不依赖设备像素比。
为什么 SVG 本身就能适配 Retina 屏
SVG 是矢量格式，浏览器渲染时按当前设备像素比实时重绘路径，不存在“放大后模糊”的问题。只要 viewBox 正确、没被强制拉伸，它在 1x、2x、3x 屏上都原生高清。
- 错误做法：
background-size: 24px 24px—— 强制拉伸会破坏矢量特性，等同于位图 - 正确做法：
background-size: contain或100% 100%（后者需确保容器宽高比与 viewBox 一致） - 必须写
background-repeat: no-repeat，否则小图标可能平铺满整个按钮
background-image 加载 SVG 的最小必要样式
漏掉任意一项都可能导致图标不显示、错位或糊掉。
background-image: url("icon-home.svg")background-repeat: no-repeat-
background-size: contain（推荐）或background-size: 100% 100%（仅当容器宽高比 = viewBox 宽高比时安全） -
background-position: center（避免靠左/靠顶偏移）
示例：
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
下载
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
立即学习“前端免费学习笔记（深入）”；
button.icon-home {
background-image: url("home.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 2em;
height: 2em;
}
HTML 中用 <img> 标签加载 SVG 时的致命陷阱
最常翻车的是写死 width 和 height 属性。
- ❌
<img src="logo.svg" width="120" height="40">—— 浏览器忽略 viewBox，强行像素缩放，矢量变位图 - ✅ 正确写法：只留
src，尺寸全交给 CSS 控制：<img src="logo.svg" alt="logo">，再用 CSS 设width、height或max-width - 务必确认 SVG 源文件包含
viewBox属性（如viewBox="0 0 120 40"），否则无法响应式缩放
什么时候还得切 PNG @2x 图
只有两种情况绕不开位图：老系统不支持 SVG（IE11 及更早）、图标含复杂渐变/阴影等 SVG 渲染不一致的效果。
- 必须用媒体查询隔离高清图：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 必须配
background-size：比如原始容器是16px × 16px，@2x 图是32×32，就得写background-size: 16px 16px，否则会撑满容器变糊 - 别混写单位：
min-resolution: 2dppx, 192dpi是“或”逻辑，反而可能在低分屏误触发
真正需要手动适配的，从来不是 SVG 本身，而是你对它的控制方式——尤其是那些看似无害的 width/height 属性和未声明的 background-size。
