SVG的基础形状矩形（rect）、圆（circle）、椭圆（ellipse）、线段（line）、折线（polyline）和多边形（polygon），本文介绍了SVG中这些常用基本形状的语法及教程。
一、矩形<rect>
矩形<rect>标记允许你创建矩形或它的变体，比如正方形，圆角矩形等。语法如下：
<rect x="80" y="53" width="189" height="52" style="fill:rgb(39，44，231); stroke:rgb(0， 0，128); stroke-width:1"/>
x属性定义了矩形左上角顶点在用户坐标系X轴上的坐标，缺省值为 0；
y属性定义了矩形左上角顶点在用户坐标系 Y轴上的坐标，缺省值为 0；
width和 height属性定义了矩形的宽度和高度，其中任意一个值为 0，矩形都不显示style属性允许我们定义 SVG推荐标准支持的 CSS样式属性。
fill 属性定义了长方形的填充颜色，这里采用的是 rgb 的格式，SVG 也支持颜色名和 16进制的颜色格式，比如:fill:red或 fill:#ff0000。
比如将填充红色，可以用fill=”red” 或用 fill=”rgb(255,0,0)” 亦或用 fill=”#ff0000”。
stroke属性定义边框线，SVG中，如果不定义，边框线没有任何宽度，换句话说，SVG默认边框线宽度为 0，对所有的 SVG的形状都是这样的。
如果需要定义边框线的话，采用这样的确语法格式:stroke:rgb(0,0,128)定义颜色，stroke-width:1定义宽度
我门还可以改变填充颜色的透明度，可以这样写:fill-opacity: 0.1，透明度范围是从 0到 1
也可以定义整个元素的透明度，opacity:0.5，该透明度对填充和边框线都有效
也可以单独定义边框线的透明度：stroke-opacity:0.8
定义圆角矩形，使用 rx，ry属性定义圆角的半径。
rx定义圆角矩形的椭圆角在X方向的半轴长度。如果rx的值大于矩形宽度的一半，则取值矩形宽度的一半。
ry定义圆角矩形的椭圆角在Y方向的半轴长度。如果ry的值大于矩形高度的一半，则取值矩形高度的一半。
二、圆<circle>
圆<circle>要定义一个圆，只需要指顶圆心的坐标、半径即可，也可使用样式单属性定义外观的样式，语法如下：
circle cx="143" cy="163" r="84" style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
其属性定义如下：
cx：是圆心在用户坐标系中的X坐标值，缺省值为0.
Cy:是圆心在用户坐标系中的Y坐标值，缺省值为0.
r:是圆的半径，不允许为负数。如果是0，则圆形不显示。
三、椭圆<ellipse>
椭圆<ellipse>定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可。语法如下：
<ellipse cx="160" cy="163" rx="101" ry="81" style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
其常用属性定义如下：
cx:是椭圆中心在用户坐标系中的X坐标值，缺省值为0。
cy:是椭圆中心在用户坐标系中的Y坐标值，缺省值为0。
rx:是X方向上椭圆的半轴长，不允许为负数。如果是0，则椭圆不显示。
ry:是Y方向上椭圆的半轴长，不允许为负数。如果是0，则椭圆不显示。
四、线段<line>
线段<line>通过指定开始点 (x1，y1)、结束点(x2，y2)和宽度 stroke定义一条直线。如：
<line x1="127" y1="65" x2="127" y2="200" style="stroke:rgb(0，0，0);stroke-width:2"/>
要想得到很细的线，可以指定 stroke-width为大于 0小于 1的数值。
其常用属性定义如下：
X1:是线段起点的X坐标值，缺省值为0。
yl:是线段起点的Y坐标值，缺省值为0。
x2:是线段终点的X坐标值，缺省值为0。
y2:是线段终点的Y坐标值，缺省值为0。
五、折线<polyline>
折线<polyline>这个标记通过指定各个点的坐标，来定义一条折线，格式如下：
<polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64， 64， 64);stroke-width:1"/>
其主要属性为points：
points：表示折线各顶点坐标的一个列表，顶点坐标的格式为”x,y，其中x表示顶点的横坐标、x表示顶点的纵坐标，不同顶点坐标之间用空格分开。绘图程序将按照points中的顶点依次绘制图形。
六、多边形<polygon>
多边形<polygon>这个标记用来指定连续的点的坐标来，定义多边形。语法如下：
<polygon points="223.5，123.034 276，213.966 171，213.966" style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>
其主要属性为points
points：points的取值与折线的points一样，但是在绘制多边形的时候，绘图程序不但按照points中的顶点依次绘制图形，而且还将最后一个顶点与第一个顶点连接起来构成一个封闭图形。
注：在 SVG中，允许使用浮点数来达到精确控制。