svg在html5中通过标签嵌入，核心是width、height与viewbox协同控制显示：前者定义css视口尺寸，后者定义用户坐标系，二者共同决定缩放与映射关系。
SVG 在 HTML5 中通过 <svg></svg> 标签嵌入，其显示效果高度依赖视口（viewport）和坐标系配置，核心在于 width、height、viewBox 三者的协同作用。
SVG 元素的基本标签结构
HTML5 中 SVG 可以内联方式直接书写，基础结构如下：
-
<svg></svg>是根容器，必须显式声明命名空间（HTML5 中可省略xmlns，但建议保留兼容性） - 常用属性包括
width、height（定义 SVG 在页面中占用的 CSS 尺寸）、viewBox（定义用户坐标系与可视区域的映射关系） - 可选属性如
preserveAspectRatio控制缩放对齐行为，默认值为xMidYMid meet - 内部可嵌套
<rect></rect>、<circle></circle>、<path></path>等图形元素，所有坐标均基于 viewBox 定义的用户坐标系
viewport 的本质：两个独立但关联的“视口”
SVG 中常被混用的“viewport”实际包含两层含义，需明确区分：
-
CSS 视口（display viewport）：由
width和height属性（或 CSS width/height）决定，是 SVG 元素在 HTML 页面中占据的布局尺寸，单位可以是 px、em、% 等 -
用户坐标系视口（user coordinate system viewport）：由
viewBox="min-x min-y width height"定义，它不控制显示大小，而是建立一个逻辑坐标空间——例如viewBox="0 0 200 100"表示该 SVG 内部所有绘图都基于宽 200、高 100 的坐标网格 - 最终渲染效果 = CSS 视口尺寸 ÷ viewBox 尺寸 × 用户坐标值；比如 viewBox 宽高比为 2:1，而 CSS width/height 设为 400×200，则等比拉伸；若设为 400×300，则因 preserveAspectRatio 默认 meet，上下留白
viewBox 配置的关键实践要点
合理设置 viewBox 是实现响应式、可缩放 SVG 的核心：
- 若希望图形随容器缩放且不失真，必须设置
viewBox，并避免同时固定width/height为绝对像素值（可用 % 或 auto 配合 CSS） - 常见响应式写法：
<svg viewbox="0 0 100 100" width="100%" height="auto"></svg>，此时 SVG 宽度占满父容器，高度按 viewBox 宽高比自动计算 - 若要裁剪内容，可让 viewBox 范围小于实际绘制区域（如绘制在 x=150 处的矩形，在 viewBox="0 0 100 100" 下不可见）
- 负值的 viewBox（如
viewBox="-50 -50 200 200"）可用于扩展坐标系，方便居中绘制或添加外边距
不设 viewBox 时的行为与风险
当仅设置 width 和 height 而忽略 viewBox：
- SVG 使用“初始坐标系”，即 1px = 1 CSS 像素，图形按绝对像素定位，失去缩放适应能力
- 响应式布局中容易出现模糊（设备像素比不匹配）、溢出或压缩变形
- 无法使用
preserveAspectRatio，也无法通过 CSSbackground-size: contain/cover等方式灵活控制显示效果 - 推荐做法：哪怕只是临时调试，也应设置合理的 viewBox，例如
viewBox="0 0 [natural-width] [natural-height]"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
