SVG在WEB绘图中的使用

一、在WEB项目开发过程中，如果需要动画或者画图效果的功能，我们一般怎么去处理？传统的做法有GIF动画，HTML5组装动画，如果动画需要与操作人员交互功能，一般采用flash，flex还有sliverlight技术来实现。这些技术在使用和操作起来都显得过于复杂，现在我介绍另一种基于 WEB的绘图技术SVG。

二、什么是SVG：

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。

SVG是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG格式具有以下优点：

　　图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件），与现有技术可以互动融合。能与javascript无缝结合使用。SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果

　　SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户

缺点就是需要浏览器环境的支持，不过现在主流的浏览器都已经支持了SVG绘图（IE8除外）。

三、SVG的功能与应用场景：

 SVG主要功能：

　　1、矢量显示对象，基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等

　　2、嵌入式外部图像，包括PNG、JPEG、SVG等

3、文字对象：SVG可以实现动态和交互功能。在DOM模型的基础上，SVG开发设计人员可以利用ECMAScript或者SMIL来进行时序控制或对象的操纵。SVG虽然是文本格式，但是SVG支持利用gzip压缩算法减少文件尺寸，压缩后的文件通常用被称为“SVGZ文件”。

Svg应用场景：

1、高保真度复杂矢量文档已是并将继续是 SVG 的最佳点。它非常详细，适用于查看和打印，可以是独立的，也可以嵌入到网页中

2、在WEB项目中的平面图绘制，如需要绘制线，多边形，图片等。

3、在WEB项目中的动画绘制，如需要在一个平面中某个对象需要某种动画效果。

四、SVG的使用方式：
本文讲述的是采用svg.js来操作svg绘图。

下载地址：http://svgjs.com/

演示地址：http://svgjs.com/test/

使用说明文档地址：http://documentup.com/wout/svg.js

其实大家根据上面我整理出地址中的内容，就可以进行初步使用了。我将svgjs中的一些对象和行为进行了归类，方便大家理解：

1、创建svg对象和获取svg对象：
vardraw = SVG(‘drawing‘).size(300, 300) 其中‘drawing’既可以是div对象，也可以是svg对象，这样都可以获取到当前的svg操作对象。如果是div对象，则会在当前div下创建一个svg对象，如果是svg对象，则会直接获取。

2、Svg矢量对象：
Rect 矩形，Ellipse 圆形，Circle 多边形，Line 线，Path 线路，Image 图像，Text 文字。

3、动画效果：
animate() 动画，pause() 停止，play 播放，during 同时进行，loop 循环，after 之后，move() 移动等

4、示例代码：
vardraw = SVG(‘drawing‘).size(300, 300); 

var rect = draw.rect(100, 100).attr({ fill: ‘#f06‘});
rect.animate().move(200, 200); 

rect.mouseenter(function() { this.pause() }) rect.mouseleave(function() { this.play() });

五、总结：

 SVG是基于XML与HTML语义一样，具有很好的交互性。目前svg已经广泛应用到了各个系统中，并且各个主流的浏览器已经开始大力对svg绘图进行支持，是一种不可多得的好技术。