SVG（Scalable Vector Graphics）是一种基于XML（eXtensible Markup Language）的矢量图形格式。在本文中，我们将介绍SVG中最常用的XML标签，以便更好地理解SVG文件结构和语法。
<svg>标签
标签是SVG文件的根元素，它定义了SVG文档的宽度、高度和视口（viewport）。以下是一个基本的标签的示例：
<svg width="100" height="100" viewBox="0 0 100 100">
<!-- SVG content goes here --></svg>
在上面的示例中，width和height属性定义了SVG文档的宽度和高度，viewBox属性定义了SVG内容的坐标系。SVG内容必须放在<svg>标签内。
<rect>标签
<rect>标签用于创建矩形，它有四个属性：x、y、width和height。以下是一个基本的<rect>标签的示例：
<!-- rect（矩形）前面两个值是位置，中间两个值是圆角，后面两个值是设置宽高 -->
<rect x="50" y="20" rx="10" ry="10" width="150" height="150"></rect>
在上面的示例中，x和y属性定义了矩形左上角的位置，width和height属性定义了矩形的宽度和高度。
<circle>标签
<circle>标签用于创建圆形，它有三个属性：cx、cy和r。以下是一个基本的<circle>标签的示例：
<!-- cirle（圆弧）前面第一个值是设置圆的半径，后面值是位置。实心圆-->
<!-- 可以在css设置为透明再设置描边，就会成空心圆 -->
<circle r="50" cx="200" cy="100"></circle>
在上面的示例中，cx和cy属性定义了圆心的位置，r属性定义了圆的半径。
<line>标签
<line>标签用于创建直线，它有四个属性：x1、y1、x2和y2。以下是一个基本的<line>标签的示例：
line{
stroke: red;
}
<!-- line（直线）前面两个值是起始点坐标，后面两个值是终点坐标 -->
<line x1="100" y1="100" x2="200" y2="200"></line>
在上面的示例中，x1和y1属性定义了直线起点的位置，x2和y2属性定义了直线终点的位置。
<text>标签
<text>标签用于创建文本，它有两个属性：x和y。以下是一个基本的<text>标签的示例：
<text x="400" y=150>123</text>
在上面的示例中，x和y属性定义了文本的左下角的位置。
<path>标签
<path>标签用于创建复杂的形状，它使用SVG路径语法来描述形状。以下是一个基本的<path>标签的示例：
<path d="M 10 10 L 90 10 L 50 90 Z"/>
在上面的示例中，d属性用于定义路径，该路径从点（10，10）开始，向纵坐标为10的位置移动，然后向横坐标为90的位置移动，再向横坐标为50、纵坐标为90的位置移动，并以Z命令（关闭路径）结束。
除了以上这些常见的SVG XML标签，还有很多其他的标签可以用来创建各种形状和图形。通过使用这些标签，我们可以创建出各种复杂的矢量图形，而无需担心图形失真或模糊度。
