下面这套方法，不改结构、不换格式，靠CSS微调就能让图标重新锐利起来。

确保SVG文件自身符合矢量规范

先从源头抓起。打开你的SVG源文件，用文本编辑器检查最外层标签。核心标准就两条：

• 必须有viewBox属性。
• 不能写死width和height的像素值。

正确写法长这样：。

记住：凡是内联的width和height，一律删掉。哪怕它们数值看起来“刚好”，Chrome也会因为这两个“枷锁”放弃viewBox坐标系统，转而采用位图缩放逻辑，清晰度就此打折扣。

如果SVG是从Sketch或Figma导出的，导出时务必勾选“响应式”或“Use viewBox”。否则默认会带固定宽高，后续怎么调都绕不过去。

HTML中用加载SVG时的写法

直接使用。记住，不要往标签里塞任何width、height或style内联样式。把尺寸控制权交给CSS。

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的兼容兜底

老安卓WebView环境里，SVG支持度偶尔会掉链子。这里提供一个三层兜底方案：

1. 第一步：用包裹和。优先加载SVG，无法识别时自动降级到PNG@2x。