viewBox 是实现 SVG 响应式缩放的核心，通过定义逻辑画布范围（min-x min-y width height）并配合 CSS 尺寸控制、preserveAspectRatio 属性及明确父容器宽度，可实现等比自适应缩放，保持矢量清晰度。
SVG 的 viewBox 是实现响应式缩放的核心，它让 SVG 内容能随容器尺寸自动缩放、对齐，无需 JavaScript 计算尺寸或重绘。
viewBox 的作用和语法
viewBox 属性定义了 SVG 的“用户坐标系”：四个值 min-x min-y width height，表示内部内容的逻辑画布范围。浏览器会将这个矩形区域，完整、按比例地映射到 SVG 元素当前的显示尺寸（由 width/height 或 CSS 控制）上。
例如：<svg viewbox="0 0 200 100" width="100%" height="200px"></svg>
表示：把内部坐标 (0,0) 到 (200,100) 的图形，拉伸/压缩填满当前 100% 宽、200px 高的显示区域。
实现真正响应式的关键组合
仅设 viewBox 不够，必须配合其他属性才能达成自适应效果：
-
去掉
width和height的固定像素值：改用 CSS 控制尺寸（如width: 100%; height: auto;），或只设一个方向（如width: 100%，高度由viewBox的宽高比自动维持） -
设置
preserveAspectRatio：控制缩放时如何处理宽高比。常用值：-
preserveAspectRatio="xMidYMid meet"（默认）：等比缩放，完整显示内容，居中，可能留白 -
preserveAspectRatio="xMidYMid slice"：等比缩放，填满容器，可能裁剪边缘 -
preserveAspectRatio="none"：强制拉伸，不保持比例（慎用）
-
-
确保父容器有明确宽度：比如
<div style="width: 80%;">，否则 <code>width: 100%无参照实用写法示例
以下 SVG 在任意宽度容器中都能等比缩放，保持清晰（矢量特性），且高度自适应：
立即学习“前端免费学习笔记（深入）”；
再配一句 CSS：
svg { width: 100%; height: auto; }此时 SVG 会始终按 2:1 宽高比缩放，文字、线条保持锐利，无需 media query 或 JS。
常见误区与注意点
-
不要同时设固定
width/height和viewBox：会覆盖viewBox的缩放行为，变成静态位图式渲染 -
内联样式优先级高于 CSS：如果 SVG 标签里写了
width="300"，CSS 的width: 100%可能不生效，建议移除内联尺寸 -
字体大小不会自动缩放：
font-size="24"是绝对单位，在小屏幕上可能过大。可用em、rem，或结合transform: scale()动态调整（较少用） -
嵌入方式影响响应性：用
<img src="icon.svg" alt="HTML5中SVG实现响应式画布Viewbox自适应缩放" >时，SVG 内部viewBox仍有效；但用<object></object>或内联时更可控，推荐内联 SVG
-
不要同时设固定
