svg是一个新增加标签，xmlns是命名空间，version是svg的版本，circle标签就是对svg要展示的图像进行描述，cx与cy表示位置，r表示半径，stroke是描边样式，stroke-width就线宽，fill是填充样式。浏览器兼容性很好：

3.2、多种引入SVG的方法

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。
SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件

引入方式如下：

引入SVG的方法 body{ backgroundembed 优势：所有主要浏览器都支持，并允许使用脚本 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许） object 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准 缺点：不允许使用脚本。 iframe 优势：所有主要浏览器都支持，并允许使用脚本 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许） 直接嵌入 在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。 注意：SVG不能直接嵌入到Opera。 image

运行结果：

3.3、画直线

示例代码：

Line

参数：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

运行结果：

3.4、画椭圆

示例代码：

椭圆

参数：

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

运行结果：

3.5、文本与矩形

示例代码：

文本与矩形My Teacher Zhangguo="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"

 

运行结果：

 

3.6、向下兼容与图标

IE8并不直接兼容SVG，如果需要显示则可以使用插件，如果不使用插件也有向下兼容的办法。

示例代码：

向下兼容与图标

 

运行结果：

参数：

image本身就是svg中引入外部图像的元素，刚好在ie8下又能被解析。

四、示例下载

示例代码：https://github.com/zhangguo5/HTML5_4_1.git

参照：