Snap.svg 測試感想

看到 Snap.svg 官網的範例, 感覺可以做很多東西, 於是動手用 Snap 做了 Merry Xmas 測試網頁。完成這個小例子之後, 有以下幾點感想:

1. Snap.svg 目前是 0.4.2 版, 版號雖然看起來不大, 但由於 Snap 作者之前 Raphael 專案累積的經驗, Snap 的功能其實已算完備。但在文件上還有許多改善空間。Snap 和 Raphael 的一些 functions 設計的方式雷同, 所以有時我是看 Raphael 的文件, 才知道 Snap 某個 function 的用法。
2. 應該多了解 SVG 的語法及運作方式 (個人對 SVG Spec 還太淺)。
3. Snap 對 IE 11 的支援還很有問題...
4. SVG 素材方面是拿網路上免費的材料。素材拿到後並不是直接可以使用。先使用 Inkscape 最佳化之後, 再使用文字編輯器去蕪存菁, 同時也可以多了解一下 SVG 的語法。由於對 Inkscape 不熟, 花了很多時間在編修素材。
5. 將多個 SVG 檔合併成一個, 並使用 <g> 標籤包裹一個個素材, 記得設定 <g> 標籤的 id 以方便 element.select() 取用。使用的圖案數量不是很多, 故只合併成一個檔, 以方便載入。
6. 用 Snap 操作物件做 transform (位移、縮放、旋轉) 時, 常常會得到奇怪的狀況, 不如預期。主要原因是 SVG 以左上角為參考點, 並不能設定 pivot, 當然不能像 Flash 那樣設定註冊點 (registration point)。後來, 用變通的方式, 如下圖, 讓圖案的中心點對準文件的左上角, 如此一來位移、縮放、旋轉的參考位置就固定了。
7. Snap/SVG 的優點是使用向量圖 (當然也可以包含點陣圖), 素材用載入的方式, 如此一來在行動裝置螢幕解析度規格多如牛毛的情況下, 可以有較為理想的呈現。