svg自适应缩放需设置viewbox建立逻辑坐标系，配合width/height（推荐相对单位）和preserveaspectratio（默认xmidymid meet）协同控制；缺viewbox则无固有宽高比，缩放失效。

要让 HTML5 中的 SVG 实现完美自适应缩放，关键不是“强行拉伸”，而是靠 viewBox 建立逻辑坐标系，并配合 width/height 和 preserveAspectRatio 协同控制映射关系。只要这三者配置得当，SVG 就能随容器等比缩放、不压扁、不留白、不溢出。

必须设置 viewBox，否则没有固有宽高比

没有 viewBox 的 SVG 在浏览器中没有内在比例，width: auto 会退化为默认 300px 宽度，导致缩放失效。例如：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 想让图标随文字大小变化（如 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 可能因表格自动布局或最小尺寸限制而无法自然缩放： <ul> <li>给 SVG 父单元格加 <code>style="width: 1%; white-space: nowrap;" 防止压缩过度

用 CSS 设置 svg { max-width: 100%; height: auto; }，确保不突破容器

若需精确按比例分配空间（如多图标并排占满一行），可用 JS 读取 viewBox 宽高比，动态设 flex-basis 或 width

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！