標籤: SVG 頁1

教學

[jQuery] 使用 js 讓用 img 嵌入的 svg 可以變色

使用 js 把用 img 讀入的外部 svg 檔案轉成 svg 標籤內容。

網路資源

vivus.js- 處理 SVG stroke Animation 的套件

vivus.js 是一個處理 SVG stroke Animation 的套件,可以選擇用 delayer、sync 或 OneByOne 的方式來顯示線條動畫。

網路資源

anime.js- 功能強大的動畫工具

anime.js 是一個功能強大的動畫工具,可以和CSS3變數、SVG、DOM 之類的元素互動,製作出高效能且平滑的動畫效果。

網路資源

fontastic- 線上 icon font 產生器

fontastic 提供了線上 icon font 產生的服務,可以自行匯入 svg 圖檔而且可以把檔案放在 amazon S3 而不用自己放 icon,支援 svg sprite,可以付費加值。

網路資源

DEVICON- 收錄了許多品牌的 icon,可以用 css 或 svg 放入網頁

DEVICON 收錄了許多品牌的 icon,可以用 css 或 svg 放入網頁。

網路資源

unDraw- 豐富的 SVG 插畫,可以下載以及商用

unDraw 是一個提供豐富的 SVG 插畫的網站,可以下載以及商用。

網路資源

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 這個網站就是準備了很多現成的讀取動畫讓我們可以直接下載回去用的方便網站。

教學

[SVG] 影響圖形大小的 viewport 與 viewbox

在 svg 裡的 viewport 跟 viewbox 算是滿重要的觀念,可以影響圖形的大小,這邊也來做一下說明。

教學

將 After Effect 轉 svg 動畫的工具套件- bodymovin

After Effect 是很多人在製作動畫時的好幫手,而 svg 的動畫近年來也在網頁上有越來越吃重的表現,但以往 AE 只能輸出影片,手寫 svg 動畫又太耗時,而現在有 bodymovin 這個工具就可以幫我們同時解決這兩個問題了。

教學

把樣式帶入 svg 的 use 內

前面提到我們可以使用 symbol 來重複利用 svg 的圖形,這裡再來說明怎麼對同樣的 symbol 套上不同的顏色。

教學

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 的文字- text

要在 svg 裡繪製文字需要使用 text 的標籤,這邊可以替文字設定外框及填滿顏色,是跟一般網頁文字比較不一樣的地方。

教學

SVG 的群組- g 與定義圖形- defs

在 svg 如果有圖形要重複使用的話我們可以使用 use,可是這個範例用起來需要先把每個圖排好後再去複製,要重複用的話就需要重新調整相對位置,如果要更有彈性且方便的應用的話,我們可以使用 defs 這個標籤把要重複使用的定義起來,這樣原始圖片就不會出現在 svg,接下來我們要用的時候再去呼叫就好了。

教學

在 SVG 使用已經繪製好的圖形- use 標籤

在 SVG 裡可以使用 use 這個標籤直接把已繪製好的圖形複製過去,並在修改樣式,使用方式為利用 href 去指定要使用的圖形 id,就可以將圖形複製過來。