svg入门
SVG意为可缩放矢量图形，使用xml格式定义图形。
预定义的图形形状：矩形<rect>、圆形<circle>、椭圆<ellipse>、线<line>、折线<polyline>、多边形<polygon>、路径<path>、图片<image>
举例1：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<--矩形-->
<rect width="300" height="100" style="fill:#0000ff;stroke:black;stroke-width:1;" />
<--图像-->
<image xlink:href="1.jpg" x="400" y="200" width="60" height="60"></image>
</svg>
举例2：
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
</head>
<body>
<div>
<svg>
<g transform="translate(20,15)">
<rect style="fill:pink" rx="5" ry="5" width="60" height="40"></rect>
<g transform="translate(10,20)">
<text>矩形</text>
</g>
</g>
<g transform="translate(110,150)">
<circle r="50" stroke="green" stroke-width="2" fill="cyan"></circle>
<g transform="translate(-10,-20)">
<text>圆形</text>
</g>
</g>
</svg>
</div>
<div>
<svg width="100%" height="100%" version="1.1">
<rect width="300" height="100" style="fill:#0000ff;stroke:black;stroke-width:1;" />
<image xlink:href="1.jpg" x="400" y="200" width="60" height="60" />
</svg>
</div>
</body>
</html>
