SVG.js- 輕量且方便的 SVG 動畫函式庫

SVG 的使用可以讓我們的網頁在互動還有動畫上多出許多變化，但要使用原生的 javascript 去做互動還滿麻煩的，而 SVG.js 就是提供了比較簡潔的方法讓我們可以方便地在頁面上使用 SVG。

官方的範例說明了使用 SVG.js 可以怎樣簡化開發，像這是使用 vanilla js

// Vanilla js
var ns = 'http://www.w3.org/2000/svg'
var div = document.getElementById('drawing') 
var svg = document.createElementNS(ns, 'svg')
svg.setAttributeNS(null, 'width', '100%')
svg.setAttributeNS(null, 'height', '100%')
div.appendChild(svg)
var rect = document.createElementNS(ns, 'rect')
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'fill', '#f06')
svg.appendChild(rect)

使用 SVG.js 則可以簡化成如下：

// SVG.js
var draw = SVG().addTo('#drawing')
  , rect = draw.rect(100, 100).fill('#f06')