SVG图形编码svg:可以不改变质量的情况下缩放svg必须有<svg></svg>包含可以绘制不同的形状矩形:rect,圆形:circle,椭圆:ellipse,线:line,折线:polyline,多边形:polygon,路径:path绘制不同的图形则应该使用不同的标签标记如圆形则使用<svg>circle</svg>可以将svg保存为svg格式x,y表示起始坐标fill:填充的颜色,stroke:画的颜色,stroke-width:画的宽度（通俗来讲就是边框）其实和CSS3的canvas差不多矩形:rect
<svg> <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>
圆角矩形：设置rx,ry（圆心的坐标）的值即可
<svg> <circle id="circle"cx="100" cy="80" r="50" stroke="gray" stroke-width="10" fill="red"></svg>
圆形:circlecircle:没有x,y的属性因为已经设置好了圆心cx,cy
<svg class="grid-50"> <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>
椭圆:ellipseellipse:椭圆其实就是矩形然后边框是圆角
<svg > <ellipse rx=100 ry=30 cx=150 cy=60 fill="yellow" stroke="gray" /></svg>
线段:line(两点确定一条直线)
<svg> <line x1="0" y1="0" x2="200" y2="20" fill="gray" stroke="gray" stroke-width="2" /></svg>
折线:polyline(就是设置多个坐标点)
注意不能使用（0,0）是无效的
<svg> <polyline points="0,0 0,20 20,20 20,40 40,40" fill="white" stroke="gray" stroke-width="2" /></svg>
多边形:polygon
当然更复杂的图形，只要知道各个点的坐标即可
<svg > <polygon points="50,50 0,100 100,100 50,50" fill="blue" stroke="gray" stroke-width="1"> </svg>
路径:path(上面所有的图形 都可以通过path来绘制)下面的命令可用于路径数据：
M = moveto //坐标移动到L = lineto //画到H = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical Arc //椭圆Z = closepath //结束路径注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
必须按照规则书写
<svg> <path d="M50 50 L200 50 L200 0 L50 0 Z" fill="blue" stroke="gray" stroke-width="2" /></svg>
demo:http://2.liteng.sinaapp.com/svg/index.html原文地址url:http://liteng.org/node/51