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