SVG 通?？梢杂米骺绶直媛室曨l。這意味著在一塊高分屏幕上不會(huì)降低圖片的銳度。此外，你甚至可以讓SVG動(dòng)起來，通過使用一些javascript類庫(kù)。下面，我們分享一些javascript類庫(kù)，這些類庫(kù)會(huì)幫助我們將SVG動(dòng)畫提高一個(gè)等級(jí)。
Vivus 是一個(gè)能動(dòng)畫js類庫(kù)，它能夠給SVG圖像顯示出被畫出來的過程。Vivus是沒有其他類庫(kù)依賴的（比如jQuery)。你僅僅需要在頁(yè)面中加入這個(gè).js文件，然后傳入需要被用來動(dòng)畫的SVG部分就行。同時(shí)通過指定一些配置，它能夠在頁(yè)面加載后直接顯示動(dòng)畫效果。
Bonsai 是一個(gè)功能豐富的 JS 類庫(kù)，你能夠用它來畫和 animate 動(dòng)態(tài)內(nèi)容在網(wǎng)站上。這些內(nèi)容包括了 HTML5 video、變化的 Canvas 和 SVG。通過 Bonsai 框架，你能畫一個(gè)簡(jiǎn)單的矩形、甚至一段矩形，如果你喜歡甚至可以畫一個(gè)豐富的多人卡通游戲進(jìn)去。
Velocity 是一個(gè) JS 類庫(kù)，它是用來做頻繁動(dòng)畫用的。Velocity 的 js 動(dòng)畫“速度”是非常快的。它比JQuery 快，甚至比 CSS 動(dòng)畫還要快。Velocity 的 API 和 $.fn.animate 很像，都是通過$()來操作。velocity()是另一種方法，相比 $().animate()?？偠灾?，你應(yīng)該使用一致的animate效果，包括 fadeIn 和 fadeOut 方法（譯者：Velocity 提供了 fadeIn 和 fadeOut 方法）。
RaphaelJS 也通常是用來在網(wǎng)頁(yè)上畫SVG圖和動(dòng)畫的。它兼容各種windows瀏覽器一直到IE6，因?yàn)槿绱?，Raphael成為了市面上最受信賴的js（svg）類庫(kù)。有了它，你可以制作分析圖表、地圖、游戲就像在廚房做飯一樣。
SnapSVG 是另一個(gè)知名 JS 類庫(kù)，它是由 Dmitry Baranovskiy 開發(fā)的（Raphael 同樣也是）。同樣它也是 Adobe Web Software Group 來維護(hù)。和 Raphael 不同的是，它只提供了 ie 最新版支持。這使得 SnapSVG 在體積上小了許多（相比 Raphel）以實(shí)現(xiàn)相同的功能（比如 trim）和支持最新的功能。
Laid back Range Painter 是一個(gè) jQuery 插件，通常被用來作繪制圖集，有點(diǎn)像 Vivus。通常你會(huì)吐槽的是它的也就只有這么一個(gè)特殊的功能。讓我來解釋下，如果你是用Illustrator 或者Inkscape制作的SVG圖像，而且SVG圖像沒有任何顏色上的變化，僅僅是軌跡的變化，可以用它。
SVG.js 是一個(gè)輕量級(jí)的操作和動(dòng)畫 SVG 類庫(kù)。你能夠操作變化方向、位置和顏色。這還沒完，你甚至可以自己實(shí)現(xiàn)插件等一些其他功能。這個(gè)實(shí)例可以attach一些插件，比如svg.filter.js，他可以為你的圖片實(shí)現(xiàn) Gaussian blur, desaturase, compare, sepia 等等功能。
Walkway 支持3種方式, path, line 和 用polyline來畫的svg線。它提供了一個(gè)很好的例子，繪制了一個(gè)PlayStation 的集合動(dòng)畫。
ProgressBar.js 是一個(gè)可愛的和易于接受的增長(zhǎng)曲線圖用來繪制卡通SVG線條。有了它，各種形狀都可以用作增長(zhǎng)曲線。它集成了一些實(shí)用的形狀如Range,Circle和Block，你甚至可以自行開發(fā)一個(gè)增長(zhǎng)圖通過Illustrator或者其他的矢量圖繪制工具。 ProgressBar.js 是輕量級(jí)，MIT許可的而且支持IE9+。你可以通過它修改大型柱狀增長(zhǎng)圖。你還可以改變屬性生成動(dòng)畫，比如stroke breadth, load opacity, load coloring等等。
英文原文：10 Helpful JavaScript Libraries to Animate SVG
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。