SVG图标在Chrome高清屏下模糊，是因浏览器将带固定宽高的SVG退化为位图缩放；解决方法是移除SVG内联width/height、保留viewBox，并用CSS控制尺寸，确保矢量渲染。
谷歌浏览器中SVG图标在高清屏下显示模糊，是因为浏览器强行按设备像素比缩放位图式处理，而SVG本应交由矢量渲染引擎保持边缘锐利。不改HTML结构、不换图标格式，仅靠CSS微调就能让图标重新清晰起来。
确保SVG文件自身符合矢量规范
打开你的SVG源文件，用文本编辑器检查最外层标签是否包含viewBox属性，且没有写死width和height的像素值。
正确写法示例：。
【必须删除所有内联的 width 和 height 属性】，哪怕它们数值看起来“刚好”，也会让Chrome放弃viewBox坐标系统，退化为位图缩放逻辑。
如果SVG是从Sketch或Figma导出的，导出时务必勾选“响应式”或“Use viewBox”，否则默认会带固定宽高。
HTML中用![]()
加载SVG时的写法
直接使用
width、height、style内联样式。
然后在CSS里统一控制尺寸：
img[src$=".svg"] { max-width: 100%; height: auto; }
这一步让浏览器把SVG当作真正的响应式资源处理，而非像素块。若容器宽高固定（如按钮内），可用width: 24px; height: 24px;，但前提是SVG本身有viewBox且比例匹配——否则会拉伸失真。
CSS background-image 加载SVG的写法
方法一：用background-size: contain保持完整且居中
.icon-home { background-image: url("icon-home.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; }
方法二：用background-size: 100% 100%填满容器（适合图标与容器宽高比严格一致的场景）
【禁止写 background-size: 24px 24px】，这会让矢量图形被强制拉伸，等效于放大一张小PNG，立刻发虚。
方法三：对需要多色或动态着色的SVG，改用内联并配合fill: currentColor，完全规避外部加载和缩放问题。
针对老安卓WebView的兼容兜底
第一步：用
第二步：确保PNG@2x文件实际分辨率为48×48（对应24×24显示区域），且命名带@2x便于维护。
第三步：在CSS中统一设置该类图片的max-width: 100%; height: auto;，避免老浏览器错误拉伸。
Chrome专属调试验证步骤
① 打开开发者工具（F12），选中SVG元素，在Elements面板确认其computed样式中width和height为auto或由CSS设定，而非来自HTML属性。
② 切换到Rendering面板 → 勾选“Paint flashing”，播放一次页面缩放或窗口 resize，观察SVG区域是否出现绿色闪动——无闪动说明未触发重绘，渲染路径干净。
③ 在Console中执行getComputedStyle(document.querySelector('img[src$="svg"]')).width，返回值应为类似"24px"而非"NaN"或"0px"。
④ 右键图片 → “在新标签页中打开图像”，查看地址栏URL是否以.svg结尾且能正常显示——排除404或服务器MIME类型错误（需返回image/svg+xml）。
