HTML5|SVG基础

SVG的出现带来了一次技术革命。变革了在Web上图文传递信息的方式，并将产生一种更适于Web信息发布的工作流模式，其中包括Web信息显示和印刷出版的组织方式。

SVG 使用 XML 编写：

//circle-demo.svg文件，以创建圆为例

 

• 第二行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

• 第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

• SVG 代码用包裹 。这是根元素。 width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间，可以有多个命名空间。

• SVG 的 用来创建一个圆。

  • cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为(0, 0)。

• r 属性定义圆的半径。

• stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

• fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

DTD（Document Type Definition）即文档类型定义文件是XML1.0版规格的一部分，可根据DTD定义的语法规则来验证XML文档的合法性。

然后，将.svg文件引入HTML文档中：

  
  


   //引入方式一
   
   //引入方式二
   
   //引入方式三
   

效果如下：

svg-circle.png

HTML5文档中可直接内嵌SVG图像

在HTML4的规范中，SVG文件可通过以下标签嵌入HTML文档：、