標籤: SVG 頁1
網路資源
vivus.js- 處理 SVG stroke Animation 的套件
vivus.js 是一個處理 SVG stroke Animation 的套件，可以選擇用 delayer、sync 或 OneByOne 的方式來顯示線條動畫。
網路資源
fontastic- 線上 icon font 產生器
fontastic 提供了線上 icon font 產生的服務，可以自行匯入 svg 圖檔而且可以把檔案放在 amazon S3 而不用自己放 icon，支援 svg sprite，可以付費加值。
網路資源
Font Awesome- 豐富的開源 icon 服務，也提供付費加值服務
Font Awesome 是一個豐富的開源 icon 服務，提供的 icon 嵌入方式有 icon font 及 svg sprite，還可以直接下載 SVG 回去使用，只要遵照他的授權方式就可以免費使用這些 icon，另外也有付費加值服務可以使用更多的 icon。
網路資源
W3Schools- 非常老牌且豐富的網頁教學網站
W3School 是一個非常老牌的網頁技術教學網站，在這邊可以學到各種網頁技術，舉凡 HTML、CSS、javascript、PHP、Python...等非常豐富，網站內也有語法教學與線上測試工具。
網路資源
loading.io- 幫你快速生成向量不失真的 svg loading 動畫
做網站的時候常常會需要用到讀取動畫，最古老都是使用 gif，後來有一陣子我有使用過 CSS3 的，但近年因為發現 svg 很強大，所以就都改用 svg 的動畫來當讀取的 icon 了，而 loading.io 這個網站就是準備了很多現成的讀取動畫讓我們可以直接下載回去用的方便網站。
教學
將 After Effect 轉 svg 動畫的工具套件- bodymovin
After Effect 是很多人在製作動畫時的好幫手，而 svg 的動畫近年來也在網頁上有越來越吃重的表現，但以往 AE 只能輸出影片，手寫 svg 動畫又太耗時，而現在有 bodymovin 這個工具就可以幫我們同時解決這兩個問題了。
教學
svg 的 patterns- 利用自定義圖樣填滿區塊
在 SVG 的 fill 裡有一個很特別的填色方式叫做 pattern，這邊指的是我們可以定義(defs)好一個圖樣(pattern)，之後再用 fill 的方式去指定用那個圖案去填滿。
教學
線段上的圖形- SVG 的 marker
svg 的 marker 讓你可以在一條線的起點、終點跟轉折點設置圖形，要來做互動圖表或是比較有彈性的圖，比如趨勢圖之類的還滿方便的，用法是先在 defs 裡用 marker 定義形狀，記得設定 id 就可以使用。
教學
SVG 定義 symbol 並重複利用圖形與 SVG Sprite
以往要製作小圖示會使用到 css sprite 的技巧，後來因為 rwd 及需要在視網膜解析度也能漂亮呈現 icon，就有用 icon font 取代 css sprite 的技術，但由於 icon font 一次需載入整包字型檔加上文字可能會有鋸齒，於是就又有些人會使用 svg sprite 的方式來製作，製作的方法是利用 svg symbol 的特性，先定義一些圖示後再把這些圖示用到想呈現的地方即可。
教學
SVG 的群組- g 與定義圖形- defs
在 svg 如果有圖形要重複使用的話我們可以使用 use，可是這個範例用起來需要先把每個圖排好後再去複製，要重複用的話就需要重新調整相對位置，如果要更有彈性且方便的應用的話，我們可以使用 defs 這個標籤把要重複使用的定義起來，這樣原始圖片就不會出現在 svg，接下來我們要用的時候再去呼叫就好了。
教學
在 SVG 使用已經繪製好的圖形- use 標籤
在 SVG 裡可以使用 use 這個標籤直接把已繪製好的圖形複製過去，並在修改樣式，使用方式為利用 href 去指定要使用的圖形 id，就可以將圖形複製過來。