SVG自适应缩放需设置viewBox建立逻辑坐标系，配合width/height（推荐相对单位）和preserveAspectRatio（默认xMidYMid meet）协同控制；缺viewBox则无固有宽高比，缩放失效。
要让 HTML5 中的 SVG 实现完美自适应缩放，关键不是“强行拉伸”，而是靠 viewBox 建立逻辑坐标系，并配合 width/height 和 preserveAspectRatio 协同控制映射关系。只要这三者配置得当，SVG 就能随容器等比缩放、不压扁、不留白、不溢出。
必须设置 viewBox，否则没有固有宽高比
没有 viewBox 的 SVG 在浏览器中没有内在比例，width: auto 会退化为默认 300px 宽度，导致缩放失效。例如：
- 想让图标随文字大小变化（如
height: 1.2em），必须写viewBox="0 0 48 48"（与原始设计尺寸一致） -
viewBox值应反映图形实际绘制范围，比如图标画在 0–48×0–48 网格内，就别写成"0 0 100 100" - 多个图标共用同一套尺寸规范（如统一 24×24 或 48×48），方便 CSS 统一控制
用 width/height 控制容器占位，而非固定像素
width 和 height 属性（或 CSS 的 width/height）定义的是 SVG 在页面中占据的布局空间，单位可用 %、vw、em 等相对单位：
- 设
width="100%" height="auto"，配合viewBox，就能随父容器宽度等比缩放 - 在响应式卡片中，可写
style="width: 100%; max-width: 200px; height: auto;"，既弹性又防过大 - 避免同时写死
width和height（如width="200" height="100"），否则会破坏 viewBox 定义的比例
preserveAspectRatio 决定缩放对齐方式
该属性控制 viewBox 内容如何适配到 CSS 视口区域，默认是 xMidYMid meet（居中、等比、完整显示）。常用值有：
立即学习“前端免费学习笔记（深入）”；
-
meet：保持比例，全部内容可见，可能留白（推荐用于图标、图表） -
slice：保持比例，填满区域，可能裁切（适合全屏背景图） -
xMinYMin：左上对齐，配合meet或slice使用，适合左对齐布局 - 显式写
preserveAspectRatio="none"会强制拉伸变形，一般不建议
表格或复杂布局中需额外约束
在 <table> 或 Flex/Grid 容器中，SVG 可能因表格自动布局或最小尺寸限制而无法自然缩放：
- 给 SVG 父单元格加
style="width: 1%; white-space: nowrap;"防止压缩过度 - 用 CSS 设置
svg { max-width: 100%; height: auto; }，确保不突破容器 - 若需精确按比例分配空间（如多图标并排占满一行），可用 JS 读取
viewBox宽高比，动态设flex-basis或width
