SVG缩放失真根本原因是viewBox与width/height宽高比不一致，导致浏览器强行拉伸坐标系；必须保持二者比例一致，并合理设置preserveAspectRatio和容器约束。
SVG缩放失真不是因为“没写对”，而是viewBox和width/height的宽高比不一致，浏览器只能强行拉伸坐标系——这是根本原因，改路径、调transform都治标不治本。
viewBox宽高比必须等于容器宽高比
失真几乎全因二者比例 mismatch。比如viewBox="0 0 100 50"（2:1），但设了width="200px" height="150px"（4:3），图形就被横向拉宽。浏览器不是“等比缩放”，而是把整个viewBox坐标空间“塞进”容器，比例不对就变形。
- 最稳写法：
width="100%" height="auto"，让浏览器按viewBox比例自动算高 - 固定比例容器：用 CSS
aspect-ratio: 2 / 1包一层<div>，再让<svg>填满 - 绝对禁止：
width="100%" height="100%"却不约束父容器比例——等于交出控制权
preserveAspectRatio不是可选配置，是必调开关
即使宽高比一致，preserveAspectRatio也决定内容怎么对齐、是否裁剪。默认"xMidYMid meet"居中并保留完整内容，但若图标靠左偏移或上下留白不均，就得手动调。
-
"xMinYMin meet"：左上角对齐，右边/下边可能大片空白 -
"xMidYMid slice"：居中填满，内容可能被裁剪（适合背景图） -
"none"：强制拉伸——除非真要变形，否则别碰
直接改width/height能缩放，但千万别动viewBox数值
想把一个viewBox="0 0 16 16"的图标放大到22px，正确做法是保持viewBox不变，只改width="22" height="22"。此时浏览器会把16单位逻辑空间映射为22像素物理尺寸，自动等比缩放。
立即学习“前端免费学习笔记（深入）”；
- 错误操作：
viewBox="0 0 22 22"——路径坐标被重新解释，线条变粗、间距错乱 - 删掉原始
width和height属性更安全，改用 CSS 控制，避免内联属性干扰 - 若用
transform: scale()，记得加transform-origin: top left防偏移
Flex容器里SVG容易被压缩，wrapper才是关键
<svg>是替换元素，flex-shrink: 0对它本身无效。常见错误是直接给<svg>加这个样式，结果毫无作用。
- 必须包一层
<div class="icon-wrapper">，给 wrapper 加flex-shrink: 0和min-width: 0 - wrapper 设
width: 100%而非max-width: 100%，iOS Safari（15.4前）对后者不响应 - 确保父容器有明确宽度（如
flex-basis或width），否则缩放链断裂
真正难的不是写对某一行代码，而是意识到viewBox不是“尺寸”，而是“坐标系定义”；width/height也不是“大小”，而是“渲染目标区域”。这两者之间的比例关系，一旦松动，所有后续调整都在补漏。
