svg图标移动端显示模糊的根源是位图缩放与retina屏渲染不匹配，正确做法是html中移除img标签宽高属性、css控制尺寸并确保viewbox存在，或用picture提供png@2x回退。
SVG图标在移动端显示模糊是因为用了位图缩放
直接把 PNG/JPG 图标塞进 <img> 或 CSS background-image，在 Retina 屏上会被浏览器强行放大 2x 渲染，但源图没那么高分辨率，结果就是发虚、锯齿、边缘毛边。
本质不是 CSS 写得不对，而是图像格式和加载方式不匹配。
- 别用
width: 24px; height: 24px;去压一个 48×48 的 PNG——它本就不是为缩放设计的 - 别给 SVG 外层容器设固定
px宽高再用object-fit拉伸——SVG 会失真或裁切 - 如果必须用位图，得提供
@2x版本并用srcset或媒体查询切换
CSS 中用 background-image 加载 SVG 要加 no-repeat 和 size
很多人把 SVG 当成普通图片扔进 background-image，但忘了它默认会平铺，且不自动适配容器尺寸。
关键不是“能不能用”，而是怎么写才不糊：
- 必须写
background-repeat: no-repeat，否则小图标可能重复铺满整个按钮 - 必须写
background-size: contain或100% 100%，否则 SVG 可能按原始 viewBox 渲染（比如 100×100 的 viewBox 在 24×24 容器里只显示左上角） - 避免用
background-size: 24px 24px——这会让 SVG 被强制拉伸，矢量优势归零
正确写法示例：
icon-btn {<br> background-image: url("icon-home.svg");<br> background-repeat: no-repeat;<br> background-size: contain;<br> background-position: center;<br>}
HTML 中用 ![]()
标签加载 SVG 必须去掉 width/height 属性
写 <img src="logo.svg" style="max-width:90%" style="max-width:90%"> 是最常见翻车点。浏览器看到 width/height 属性，就会忽略 SVG 自带的 viewBox，强行按像素缩放，矢量变位图。
要让 SVG 真正响应式、高清，就得交还控制权：
- 删掉 HTML 中的
width和height属性 - 用 CSS 控制尺寸，例如
max-width: 100%; height: auto; - 确保 SVG 文件本身有
viewBox（如viewBox="0 0 120 40"），没有width/height固定值
错误示例：<img src="icon.svg" style="max-width:90%" style="max-width:90%">
正确示例：<img src="icon.svg" alt="home"> + CSS 控制
需要兼容老安卓 WebView 就得 fallback 到 PNG @2x
Android 4.4 以下的 WebView 对内联 SVG 支持差，部分机型甚至解析失败、空白；iOS 9 之前也有 SVG 渲染 bug。纯 SVG 不是万能解药。
稳妥做法是渐进增强：
- 优先用
<img>加载 SVG，现代浏览器走矢量路径 - 用
<picture></picture>+<source></source>提供 PNG fallback：<picture><br><source media="(min-resolution: 2dppx)" srcset="icon@2x.png"><br> @@##@@<br></source></picture>
- 注意：
min-resolution: 2dppx比min-device-pixel-ratio更可靠，后者在部分安卓浏览器里失效
真正难的不是换格式，而是得同时维护两套资源路径、校验 SVG 是否被压缩破坏、确认 CDN 是否缓存了旧版 PNG —— 这些细节一漏，高清屏照样糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
