SVG 变形的根本原因是 viewBox 与 width/height 宽高比不匹配，导致坐标系被非等比“塞入”容器；最稳妥的响应式写法是 width="100%" + height="auto"，配合显式 viewBox 实现自动按比例缩放。
viewBox 宽高比不匹配 width/height 就会拉伸变形
SVG 渲染不是“等比缩放”，而是把 viewBox 定义的坐标系“塞进”由 width 和 height（或 CSS）决定的容器里。只要两者宽高比不一致，浏览器就会按 preserveAspectRatio="xMidYMid meet" 默认规则留白或裁剪——但多数人看到的是图形被横向压扁、文字糊成一片、图标错位。
常见错误现象：
-
viewBox="0 0 100 50"却设width="200px" height="200px"→ 图形被纵向拉长 - Figma 导出图标带
viewBox="0 0 24 24"，但硬写width="48" height="36"→ 右侧留白或内容偏移 - 仅用 CSS：
svg { width: 100%; height: 200px; }却没配viewBox→ 图形比例崩坏，旧版 Safari 直接不显示
响应式 SVG 最稳的写法：width="100%" + height="auto"
让浏览器自动按 viewBox 的宽高比推算高度，是最小干预、兼容性最好的方案。它不依赖父容器是否设了 aspect-ratio，也不需要 JS 计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
height="auto"，不能省略或写成height="" -
width可用"100%"、"fit-content"或具体像素值，但别混用百分比和固定值（如width="50%" height="100px"） - 若父容器宽度动态变化（比如 flex 项），这个组合依然可靠；但若父容器本身宽高比不稳定，需额外加 CSS 保护
示例：<svg viewBox="0 0 100 50" width="100%" height="auto"><circle cx="50" cy="25" r="20"/></svg>
需要精确控制容器尺寸时，用 CSS aspect-ratio 锁定比例
当你要把 SVG 嵌在卡片、按钮或网格项中，且父容器本身没有固定宽高比，height="auto" 可能导致高度塌陷或布局跳动。这时该让容器自己守规矩。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给外层
<div>加style="aspect-ratio: 2 / 1"（对应viewBox="0 0 100 50"） -
<svg>内部设width="100%" height="100%"，不设viewBox外的尺寸属性 - 避免同时用
aspect-ratio和height="auto"—— 浏览器可能忽略后者 - IE 不支持
aspect-ratio，如需兼容，退回到 padding-top 技巧或 JS 动态设高
preserveAspectRatio 不是可选项，是默认行为的开关
即使 viewBox 和 width/height 宽高比一致，preserveAspectRatio 仍决定图形如何对齐、是否居中、边缘是否裁切。默认值 "xMidYMid meet" 多数时候够用，但一动就容易露馅。
典型问题场景：
- 图标左上角贴边显示？可能是
preserveAspectRatio="xMinYMin"，换成"xMidYMid"或删掉该属性 - 背景图要填满不留白？用
"xMidYMid slice"，但注意内容可能被裁剪 - 绝对禁止拉伸？千万别设
"none"，除非你真想让圆形变椭圆 - 动画中动态改
viewBox时，preserveAspectRatio会直接影响过渡效果，建议显式声明
最安全做法：不写这个属性，或明确写成 preserveAspectRatio="xMidYMid meet"，别依赖隐式继承。
viewBox 不是“画布大小”，width/height 也不是“图形尺寸”——它们是两套坐标系统之间的映射参数。调错一个，整个 SVG 就失去矢量优势；配对正确，才能真正实现「缩放不失真、响应不跳动、交互不卡顿」。最容易被忽略的，其实是 height="auto" 的 auto 必须是字符串字面量，而不是 CSS 的 auto 值，写成 height:auto（无引号）在 HTML 中无效。
