一、在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://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繪圖進行支持，是一種不可多得的好技術。