SVG图形元素通过XML标签直接声明，含基础形状、path路径、分组复用及坐标控制四大特性，结构清晰语义直观。

SVG 图形元素在 HTML5 中通过明确的 XML 风格标签直接声明，无需额外脚本即可定义形状、路径与样式，结构清晰、语义直观。

基础图形元素的直接声明

SVG 提供 、、、、 和 等内置标签，每个标签对应一种几何类型，属性即为关键参数：

• —— x/y 定位左上角，width/height 控制尺寸
• —— cx/cy 为中心坐标，r 为半径
• —— points 属性用空格分隔坐标对，按顺序连线闭合

路径（path）的结构化描述

是最灵活的图形元素，通过 d 属性 使用命令式语法描述矢量路径，每条指令由字母开头、后接数值参数：

• M x y —— 移动到起点（绝对坐标）
• L x y —— 画直线到指定点
• C x1 y1 x2 y2 x y —— 绘制三次贝塞尔曲线（两个控制点 + 终点）
• Z —— 自动闭合路径
• 例如： 表示一个直角三角形区域

组合与复用：、 与

结构化不仅体现在单个图形，更在于组织逻辑：

• 标签对多个元素进行分组，支持统一 transform 或 style，提升可维护性
• 声明可复用资源（如渐变、图案、图标），不直接渲染
• 引用已定义资源，实现零重复绘制，适合图标系统或 UI 组件

坐标系统与视图控制

SVG 渲染依赖明确的坐标上下文：

• 根 元素需声明 width、height 和可选的 viewBox="x y width height"
• viewBox 定义用户坐标系范围，配合 preserveAspectRatio 控制缩放对齐方式
• 所有子元素坐标均基于 viewBox 定义的逻辑坐标系，与容器像素尺寸解耦

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