基本形状
大多数 SVG 图形都使用几种基本形状。这些形状的目的从它们的名称就可以明显看出。其中一些决定其位置和大小的参数已给出，但元素参考可能会包含更准确和完整的描述，以及此处未涵盖的其他属性。但是，由于它们在大多数 SVG 文档中使用，因此有必要对其进行某种介绍。
要插入一个形状，您需要在文档中创建一个元素。不同的元素对应不同的形状，并需要不同的参数来描述这些形状的大小和位置。有些形状略显冗余，因为它们可以通过其他形状创建，但它们都存在是为了方便您，并使您的 SVG 文档尽可能简短和易于阅读。所有基本形状都显示在下图中。
生成该图像的代码如下所示
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
注意： stroke、stroke-width 和 fill 属性将在教程的后面进行解释。
矩形
<rect> 元素在屏幕上绘制一个矩形。有六个基本属性控制屏幕上矩形的位置和形状。右侧的矩形设置了 rx 和 ry 参数，使其具有圆角。如果未设置，则默认为 0。
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
圆
<circle> 元素在屏幕上绘制一个圆。它需要三个基本参数来确定元素的大小和形状。
<circle cx="25" cy="75" r="20"/>
椭圆
<ellipse> 是 <circle> 元素的一种更通用的形式，您可以在其中分别缩放圆的 x 和 y 半径（在数学上通常称为*半长轴*和*半短轴*）。
<ellipse cx="75" cy="75" rx="20" ry="5"/>
线
<line> 元素以两个点的坐标作为参数，并在它们之间绘制一条直线。
<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
折线
<polyline> 是一个由连接的直线组成的组。由于点的列表可能很长，因此所有点都包含在一个属性中
<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>
点-
点的列表。每个数字必须由空格、逗号、换行符或换行符分隔，并允许有额外的空白。每个点必须包含两个数字：一个 x 坐标和一个 y 坐标。因此，列表
(0,0)、(1,1)和(2,2)可以写成0, 0 1, 1 2, 2。
多边形
<polygon> 类似于 <polyline>，因为它由连接点列表的直线段组成。但对于多边形，路径会自动将最后一个点与第一个点连接起来，创建一个闭合形状。
注意： 矩形是一种多边形，因此可以使用多边形创建一个没有圆角的 <rect/> 元素。
<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
点-
点的列表，每个数字由空格、逗号、换行符或换行符分隔，并允许有额外的空白。每个点必须包含两个数字：一个 x 坐标和一个 y 坐标。因此，列表
(0,0)、(1,1)和(2,2)可以写成0, 0 1, 1 2, 2。然后路径会闭合，因此会从(2,2)到(0,0)绘制一条最后的直线。
路径
<path> 是 SVG 中可以使用最通用的形状。使用 path 元素，您可以绘制矩形（带或不带圆角）、圆、椭圆、折线和多边形。基本上，其他任何类型的形状、贝塞尔曲线、二次曲线以及更多形状都可以绘制。
因此，本教程的*下一节*将重点介绍路径。但目前，请注意有一个参数用于控制其形状。
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
d-
一个点的列表和其他有关如何绘制路径的信息。有关更多信息，请参阅*路径*部分。