SVG缩放失真的根本原因是viewBox宽高比与容器width/height宽高比不一致，导致浏览器强行拉伸坐标系。viewBox定义内部坐标范围，实际尺寸由width/height决定，二者比例必须匹配，否则变形；preserveAspectRatio控制对齐与裁剪方式，不可忽略。
SVG viewBox 缩放失真的根本原因
svg 缩放后图形被拉伸、文字变模糊、图标错位——问题几乎都出在 viewbox 和 width/height 的配合上。浏览器不是“按比例缩放”，而是按 viewbox 定义的坐标系把内容“拉进”容器，若容器宽高比和 viewbox 宽高比不一致，必然变形。
常见错误现象：viewBox="0 0 100 100" 但设了 width="200px" height="150px"；或用 CSS 强制设置 width: 100%; height: 200px 却没配 preserveAspectRatio。
-
viewBox是“画布坐标系”，不是尺寸，它定义了 SVG 内部坐标的范围（如"0 0 100 100"表示内部坐标从 (0,0) 到 (100,100)） - 实际渲染尺寸由
width/height（或 CSS）决定，两者宽高比必须一致，否则失真 - 省略
width和height时，浏览器按viewBox比例自动推算，最安全
保持比例的两种可靠写法
不用 JS、不依赖外部库，纯 HTML/SVG 就能稳住比例。核心是让渲染容器的宽高比 = viewBox 的宽高比，并控制裁剪行为。
- 推荐写法一（响应式+等比）：
<svg viewBox="0 0 100 50" width="100%" height="auto">
——height="auto"让浏览器按viewBox比例自动计算高度，width="100%"响应父容器 - 推荐写法二（固定宽高比容器）：
<div style="aspect-ratio: 2 / 1"><svg viewBox="0 0 100 50" width="100%" height="100%"></svg></div>
—— 用 CSSaspect-ratio锁定容器比例，再让 SVG 填满 - 避免写法：
width="100%" height="100%"在未约束父容器比例时，等于放弃控制权
preserveAspectRatio 不是可选项，是必调参数
即使宽高比一致，preserveAspectRatio 也决定内容如何对齐和是否裁剪。默认值 "xMidYMid meet" 多数时候够用，但遇到图标居中偏移、留白不均，就得动手调。
-
"xMidYMid meet"：等比缩放+居中，内容全见，可能有上下/左右留白（最常用） -
"xMidYMid slice"：等比缩放+填满，内容可能被裁剪（适合背景图） -
"none"：强制拉伸，完全放弃比例——除非真要变形，否则别碰 - 错误示例：
preserveAspectRatio="xMinYMin"在viewBox="0 0 100 100"下会左上角对齐，右边/下边留大片空白
内联 SVG 和 <img> 引用的缩放差异
内联 SVG 可直接操作 viewBox 和属性，而 <img src="icon.svg"> 是当作位图处理的——浏览器只读取 SVG 文件首行的 viewBox，且无法通过 HTML 属性覆盖 preserveAspectRatio。
立即学习“前端免费学习笔记（深入）”；
- 用
<img>时，确保 SVG 源文件已写好正确的viewBox和preserveAspectRatio，外部无法修正 - 需要动态缩放或交互（比如 hover 放大图标），必须用内联 SVG，
<img>不支持 :hover 缩放 SVG 内部元素 - 性能提示：大量小图标用
<img>更轻量；需统一主题色或动画，选内联 + CSS 变量
最易被忽略的是：很多人改了 viewBox 却忘了同步调整内部元素坐标。比如把 viewBox="0 0 200 200" 改成 "0 0 100 100"，而路径 d="M150,150 L200,200" 就直接跑出画布了——缩放是坐标系层面的事，不是“图片变小”，所有数值都要按比例重算。
