原文 http://forjs.org/book/lkaK8WuNme/section/x1lg8nrIMve

SVG是个啥

推荐：《精通Node.js开发》 《Angular.js视频详解》

可加作者QQ 1405491181 交流Node.js & HTML5 相关技术

先弄个小例子看看，画个圆

<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="yellow"/>

</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 元素和文档本身。

可以嵌入 iframe

<iframe src="circle.svg" width="300" height="100">
</iframe>

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体