Chrome中SVG图标模糊的根本原因是浏览器将SVG当作位图缩放，修复只需两点：确保SVG文件包含viewBox且无内联width/height，以及完全由CSS控制尺寸。
Chrome 中 SVG 图标模糊，根本不是“兼容问题”，而是浏览器把本该矢量渲染的 SVG 当成了位图在缩放——只要 SVG 源文件和加载方式稍有偏差，立刻发虚。修复不靠 hack，只靠两件事：确保 viewBox 存在且无内联 width/height，以及让尺寸控制权完全交给 CSS。
SVG 文件本身必须带 viewBox 且删掉 width 和 height
这是所有模糊问题的起点。Chrome 看到 <svg width="24" height="24"> 就会放弃 viewBox 坐标系统，退化为光栅化再缩放，等效于放大一张 24×24 的 PNG。
- 正确写法：
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> - 错误写法：
<svg width="24" height="24" viewBox="0 0 24 24">（哪怕数值一致，也会触发退化） - 从 Sketch/Figma 导出时，务必勾选“响应式”或“Use viewBox”，否则默认带固定宽高
- 上线前用
svgo批量清理，避免设计师交付的 SVG 暗藏style或冗余属性
<img> 加载 SVG 时禁止写内联宽高，全交由 CSS 控制
写 <img src="icon.svg" width="24" height="24"> 是最常见翻车点。Chrome 不会重绘矢量路径，只会缩放那个初始光栅结果。
- HTML 只保留：
<img src="icon-home.svg" alt="首页"> - CSS 控制尺寸，例如：
img[src$=".svg"] { width: 24px; height: 24px; }或max-width: 100%; height: auto; - 如果容器是 flex 或 grid，注意
svg默认是inline元素，加display: block避免基线空隙导致实际高度非整数（Safari 更敏感，但 Chrome 在某些布局下也会受影响）
用 background-image 加载 SVG 时，background-size 别写像素值
写 background-size: 24px 24px 会让 Chrome 强制拉伸 SVG 内部坐标，破坏矢量缩放逻辑，直接变糊。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background-size: contain;+background-position: center;+background-repeat: no-repeat; - 若图标与容器宽高比严格一致（如全部 1:1），可用
background-size: 100% 100%; - 绝对禁用：
background-size: 24px 24px;、background-size: cover;（易裁切失真） - 确保 SVG 文件本身有
viewBox，否则contain也无效
真正麻烦的从来不是 CSS，而是构建流程是否污染了 SVG 精度
很多项目加了各种“优化”插件，结果把 d="M10,10 L20,10" 压成 d="M10.0000001,10 L20,10"，Chrome 渲染时就会引入 subpixel 插值，边缘轻微发虚。这种模糊肉眼难辨，但一上高清屏就露馅。别只盯着样式表改，先检查构建产物里的 SVG 源码是否还干净。
