掌握SVG需理解XML语法与关键标签，首先使用定义画布大小和坐标系，接着用、、、、、和绘制矩形、圆形、椭圆、直线、多边形、折线及复杂路径，通过fill、stroke、stroke-width等属性设置样式，并可直接嵌入HTML显示矢量图形。
要在SVG中绘制图形，你不需要复杂的工具或编程语言，只需要掌握基本的XML语法和几个关键标签。SVG是基于文本的矢量图像格式，可以直接在HTML中使用，也可以单独保存为.svg文件。下面带你一步步了解如何用SVG XML语法绘制常见图形。
1. SVG 根元素与画布设置
所有SVG内容都必须包裹在 标签内。这个标签定义了绘图区域（即“画布”）的大小和坐标系统。
- width 和 height：设置画布宽高，例如 width="200" height="150"
- viewBox：定义可视区域的坐标范围，如 "0 0 100 100"，有助于缩放适配
- 通常加上命名空间 xmlns="http://www.w3.org/2000/svg"（在独立文件中需要）
示例：
2. 绘制基本图形
SVG提供了多个标签用于创建基础形状，每个都有对应的属性来控制位置、大小和样式。
- x, y：左上角坐标
- width, height：宽高
- rx, ry：可选，圆角半径
例子：
- cx, cy：圆心坐标
- r：半径
例子：
- cx, cy：中心点
- rx：x轴半径，ry：y轴半径
例子：
- x1, y1：起点
- x2, y2：终点
- stroke：线条颜色，stroke-width：线宽
例子：
- points：一系列 x,y 坐标对，用空格或逗号分隔
例子（三角形）：
- 类似 polygon，但不自动闭合路径
例子：
- d 属性：定义路径指令，如 M（移动）、L（直线）、C（贝塞尔曲线）、Z（闭合）等
- 适合绘制复杂形状
例子（简单路径）：
3. 设置图形样式
你可以通过以下属性给图形上色和描边：
- fill：填充颜色（默认黑色）
- stroke：边框颜色
- stroke-width：边框粗细
- 支持颜色名称、十六进制（#ff0000）、RGB等
示例：
4. 在 HTML 中使用 SVG
可以直接把SVG代码嵌入HTML文件中，无需额外加载。
这样就能在网页中显示一个黄色的圆。
基本上就这些。掌握这几个标签和属性后，你就可以用纯文本方式创建清晰、可缩放的矢量图形了。SVG的优势在于无损缩放、文件小、易于修改，非常适合图标、图表和响应式设计。不复杂但容易忽略。
