SVG图标失真或溢出主因是viewBox缺失、width/height写死或盒模型干扰；需删内联宽高、补合理viewBox、URL编码XML字符、用精确background-size，并通过display:block或wrapper解决flex错位与基线溢出。
SVG图标失真或溢出，90%不是浏览器问题，而是 viewBox 缺失、width/height 写死、或盒模型干扰导致的渲染错位。直接改 SVG 源码和 CSS 控制逻辑就能解决，不用加 polyfill 或 JS 补丁。
为什么 background-image 引入的 SVG 会糊或变形
用 background-image: url("data:image/svg+xml,...") 时，只要原始 SVG 没带 viewBox，或者写了 width="24" 和 height="24"，浏览器就会先光栅化成位图再缩放——background-size 完全失效。
- 必须删掉 SVG 中所有
width和height属性（哪怕设成100%也不行） -
viewBox必须存在且值合理，例如viewBox="0 0 24 24" - XML 特殊字符要 URL 编码：
<→%3C，>→%3E，"→%22；漏编码会导致背景空白且无报错 - 放弃
background-size: cover或contain——小图标场景下它们只会拉伸或裁切路径；改用精确值，如background-size: 24px 24px
内联 <svg> 为什么在 flex 容器里错位或不缩放
SVG 是替换元素，flex-shrink 不作用于它本身，只对它的父容器生效。常见错误是给 <svg> 加 flex-shrink: 0，结果毫无反应。
- 给 SVG 包一层
<div class="icon-wrapper">，把flex-shrink: 0和min-width: 0加在 wrapper 上 - SVG 自身设
width: 100%或height: 100%，但必须删掉源码里的width/height属性 - iOS Safari（15.4 前）对无明确
width的内联 SVG 忽略max-width: 100%，所以 wrapper 要显式设width: 100%，不能只靠max-width - 避免在 SVG 上设
object-fit——它对内联<svg>完全无效
为什么 height: 100% 的 SVG 会垂直溢出
SVG 默认是 display: inline，会按文本基线对齐，底部预留下沉字符空间。即使父容器 margin/padding 全清零，这个微小间隙仍会让 height: 100% 的 SVG 实际高度超出容器。
立即学习“前端免费学习笔记（深入）”；
- 最稳解法：给
<svg>加display: block - 如果必须保持 inline 行为，可用
vertical-align: top或vertical-align: middle替代 - 慎用
transform: scale()：没配transform-origin时默认以中心缩放，容易让图标“飘”出预期位置；左对齐场景建议设transform-origin: top left - 父容器设
font-size: 0可消除基线影响，但会影响子文本，慎用
真正麻烦的不是写几行 CSS，而是 SVG 源文件本身是否干净——导出时删 metadata、去 width/height、补 viewBox，这一步漏了，后面所有样式都白调。
