標籤: SVG 頁1

教學

[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，就可以將圖形複製過來。

教學

在 svg 設定漸層填色- linearGradient 與 radialGradient

在 svg 要使用漸層，需要使用 linearGradient 這個標籤，然後再使用 stop 去設定每個點的間層顏色就好，若使用 defs 可以設定完再利用 fill 的 url 去指定 id 即可。

教學

在 SVG 內使用 html- forginObject 標籤

在 SVG 裡基本上要使用其規定的標籤才能做出文字或圖形，那如果已經習慣 html 的標籤想要在 svg 內使用的話就會很不習慣，比如在 svg.裡要置入圖片要使用 image ，而 html 則是使用 img 的標籤，還好 svg 有提供一個 forginObject 的標籤，只要使用後就能在 svg 內使用 html 了。