SVG目前还是存在许多问题,Windows下使用IE的兼容性和渲染效果都太差, http://www.jianshu.com/p/095eb298ed18

svg icon 用法

  1. 直接写进代码.
  2. 用 img/Object 标签

  3. 用 background and data url

教程:

SVG 可缩放矢量图形(Scalable Vector Graphics) SVG 使用 XML 格式定义图像。

是一种用代码来描述和绘图的语言.

SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</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 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。 width 和 height 属性可设置此 SVG 文档的宽度和高度。 version 属性可定义所使用的 SVG 版本, xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

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

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

SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。

<iframe> 标签可工作在大部分的浏览器中。 <iframe src="rect.svg" width="300" height="100"> </iframe>

形状

矩形   <rect>
圆形   <circle>
椭圆   <ellipse>
线     <line>
折线   <polyline>
多边形 <polygon>
路径   <path>