SVG在HTML5中的使用
SVG（Scalable Vector Graphics）是可伸缩矢量图形的缩写。它是一种图形（图片）格式，其中以XML指定形状。大多数Web浏览器都可以显示SVG；SVG 图片可以使用文本编辑器创建和编辑。SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
SVG是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 在线编辑器 SVG在线编辑器 -? 可在线编辑SVG，SVG可转为SVG源代码
SVG里一些形状元素，程序员可以使用这些元素来绘制图形：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
直线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
HTML 文档使用SVG的方式：
☆直接在HTML嵌入SVG代码，如下例
例1、使用<circle>元素的作用是绘制圆形，，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG示例</title>
</head>
<body>
<h1>我的第一个SVG程序</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>
</body>
</html>
保存文件名为：SVG示例1.html，用浏览器打开效果如下：
代码说明：
SVG图片用<svg>标记定义
<svg>元素里提供了“width”和“height”两个属性来定义SVG图片的高度和宽度
<circle>元素的功能是画出一个圆
cx和cy两个属性分别定义了圆心的x坐标和y坐标。如果没有提供cx和cy的值，那么，缺省圆心是(0, 0)
r属性定义了圆的半径长度
stroke和stroke-width两个属性用来定义图像的边框样子。上面例子中定义圆的边框颜色为green，边框粗细为4px
fill属性定义了圆内部填充的颜色。我们可以看出，例子中填充了黄色。
☆SVG 文件可通过<iframe标签嵌入 HTML 文档
使用 <iframe> 标签语法： <iframe src="circle1.svg"></iframe>
例2、使用 <iframe> 标签SVG 文件嵌入HTML 文档
先用SVG 在线编辑器SVG 在线编辑器 | 菜鸟工具建立一个名为的文件：circle1.svg
HTML 文档源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG示例2</title>
</head>
<body>
<iframe src="circle1.svg" width="420" height="420"></iframe>
</body>
</html>
?保存文件名为：SVG示例2.html，用浏览器打开效果如下：
☆用<a>标签链接到一个SVG文件，语法：
?<a href="circle1.svg"> </a>
进一步学习资料