svg中可以绘制的基本图形有线段，矩形，多边形，圆，椭圆，分别来看一下这些基本图形：
线段
使用<line>元素创建一条线段，格式如下：
<line x1=" start-x " y1=" start-y " x2=" end-x " y2=" end-y " stroke="black">
其中start-x和start-y为线段起点的x，y坐标，end-x和end-y为线段结束点的x，y坐标。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000000">
<line x1="10" y1="10" x2="200" y2="200" stroke="black">
</line>
</svg>
</body>
</html>
以上代码在浏览器中显示如下：
以上代码中<line>元素除了自身的基本属性之外还有个stroke属性，此属性用来指定基本图形的轮廓颜色，若不指定，默认为none，即在浏览器中无法看到所绘制的图形。除此之外，类似的属性还有stroke-width，stroke-opacity，stroke-dasharray，fill等，此类属性以后本文结尾时会详解，此处只是用来将图形显示出来
矩形
使用<rect>元素绘制一个矩形，格式如下：
<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h"></rect>
其中x，y属性为矩形左上角顶点的x，y坐标，width和height分别指定矩形的宽高
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="100" height="60" stroke="black" fill="none">
</rect>
</svg>
</body>
</html>
在浏览器中呈现如下：
圆角矩形
圆角矩形也使用<rect>元素创建，只不过额外指定了两个属性，格式如下：
<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h" rx="rx" ry="ry">
</rect>
属性rx和ry分别指定了x方向和y方向的圆角半径，示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="60" stroke="black" fill="none">
</rect>
</svg>
</body>
</html>
在浏览器中呈现如下：
将以上代码中的svg部分代码改为下面的代码：
<svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="10" stroke="black" fill="none">
</rect>
</svg>
在浏览器中呈现如下：
圆
在svg中使用<circle>元素创建一个圆，格式如下：
<circle cx="cx" cy="cy" r="radius" ></circle>
cx和cy分别指定了圆心坐标的x和y，r元素指定了圆的半径。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<circle cx="100" cy="100" r="60" stroke="black" fill="none">
</circle>
</svg>
</body>
</html>
在浏览器中呈现如下：
椭圆
在svg中创建椭圆使用<ellipse>元素，只不过椭圆有两个半径，水平方向上的和垂直方向上的，格式如下：
<ellipse cx="circle-x" cy="circle-y" rx=" x-radius " ry="y-radius"></ellipse>
其中cx和cy为椭圆的圆心，rx和ry为水平方向和垂直方向上的半径。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<ellipse cx="100" cy="100" rx="60" ry="90" stroke="black" fill="none">
</ellipse>
</svg>
</body>
</html>
在浏览器中呈现如下：
多边形
svg中最有魅力的就是多边形和路径了，CSS3再牛逼也没有办法像svg一样如此简单的创建一个任意的多边形，在svg中通过<polygon>元素创建一个多边形，格式如下：
<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polygon>
通过为points属性指定多个坐标点来创建一个多边形，坐标点之间以空格或者逗号隔开，指定坐标时不需要指定返回起始坐标，图形会自动闭合。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<polygon points="10,150 30,40 170,50 10,20" stroke="black" fill="none">
</polygon>
</svg>
</body>
</html>
在浏览器中下呈现如下：
折线
绘制折线的时候可以通过一系列的<line>元素来创建，但是这样做会加大阅读的难度，不利于代码的维护，所以可以通过另一种方法来创建折线，那就是<polyline>元素，格式如下：
<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polyline >
其中的point元素指定的也是坐标点，点之间以空格或者逗号隔开，示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<polyline points="23.5,45 58.2,87.63 34,23.4 200,210" stroke="black" fill="none"></polyline>
</svg>
</body>
</html>
浏览器中打开如下：
画笔属性
stroke：画笔的颜色，默认为none
stroke-width：画笔的宽度，默认为1
stroke-opacity：画笔颜色的透明度，取值为0到1之间的数值，0为完全透明，1为完全不透明，默认为1
stroke-dasharray：指定一个数值序列来表示虚线的长度和虚线中间空隙的长度
stroke-linecap：线头尾的形状，值为butt，round或者square
stroke-linejoin：图形的棱角或者一系列连线的形状，取值为miter（尖的，默认值），round或者bevel（平的）
stroke-miterlimit：相交处显示宽度与线宽的最大比例，默认值为4
fill：指定图形的填充颜色，默认值为black
fill-opacity：填充的透明度，取值范围为0~1之间的数值，0为完全透明，1为完全不透明，默认值为1
fill-rule：填充的规则，取值为nonzero（默认值）或者evenodd