1、先上个图看一下效果：
这里面有直线、圆、矩形、椭圆、多边形。

SVG 可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

2、代码实现：

<svg width="500" height="200" viewBox="-100 -100 500 200">
    <line
      x1="0"
      y1="-75"
      x2="170"
      y2="-75"
      style="stroke: rgb(0, 0, 0); stroke-width: 1"
    />
    <ellipse cx="150" cy="10" rx="70" ry="50" style="fill: #3232ff;stroke:#f2f2f2;stroke-width:1" />

    <circle cx="0" cy="20" r="70" fill="#D1495B" />

    <circle
      cx="0"
      cy="-75"
      r="12"
      fill="none"
      stroke="#F79257"
      stroke-width="2"
    />

    <rect x="-17.5" y="-65" width="35" height="20" fill="#F71257" />
    <polygon points="100,10 250,50 130,100" style="fill:lime;stroke:purple;stroke-width:1" />

3、图形说明：

1）直线line：二点确定一条直线：开始点（x1,y1)  结束点（x2,y2)。

2）椭圆ellipse：圆心（cx,cy) , rx:x轴方向上的半径，ry：y轴方向上的半径。如果rx=ry那么将会是一个圆，而不在是一个椭圆形。

3）圆circle：圆心（cx,cy) ,半径：r。

4）矩形rect：左上角的点（x,y)，宽度：width，高度：height

5）多边形polygon： points定义了点的集合-- p1（100,10)   p2 (250,50)  p3 (130,100)，点义了三个点，然后我们将三个点，用直线连接起来，就成为了一个三角形。

多个点之间用空格来分隔，并不是以逗号来分隔开的。

4、fill、stroke、stroke-width说明：

fill：填充区域颜色。

stroke：边的颜色。

stroke-width:边的宽度。

5、viewBox

这个类似于矩形rect。左上角的点（x,y)，宽度：width，高度：height。

viewbox属性的值是一个包含4个参数的列表，分别是min-x、min-y、width、height，以空格或者逗号分隔开。

以上是SVG的几个基本的图形的说明，对于我们在使用@antv/x6的时候提供了一定的基础。