Daco Note

SVG 動態圖片及 GIF 製作

SVG 和 GIF 有什麼不一樣

先講一下 SVG 和 GIF 有什麼不一樣，如果你「已經知道」或「不想知道」也可以直接跳下一段。

兩者一樣都一樣可以做透明背景、可以做成動態圖。

GIF

GIF 是一種歷史悠久的動態圖像，可以想像就是一張圖、一張圖接起來的動態，可以重複播放，也可以設定每張圖的停留時間。它是一種「點陣」圖形檔，可以顯示256色(算是滿少的)。所謂「點陣」圖就是由很多的像素(pixel)組成，每一個像素記錄一個顏色，所以圖檔越大，檔案也越大。一般狀況下用 GIF 做動態圖檔案會比 SVG 來得大。

把點陣圖檔放大看到每個像素紀錄一個顏色

點陣圖檔每一個像素，記錄一個顏色。

另一個缺點就是如果把本來很小的點陣圖檔放大很多，就會出現馬賽克鋸齒狀，圖像會失真，而且看起來很沒質感。

仔細觀察一下，路上很多燈箱都有這個問題，看了好惱人。有可能不是設計師的錯，而是廠商提供的原始照片檔案太小。

點陣圖放大容易出現鋸齒

SVG

svg 是向量圖，向量圖是由記錄座標來產生圖像，所以我們常看到的向量圖都是由色塊組成。由於向量圖只要紀錄座標、曲線、範圍內的顏色等等資訊就可以呈現，因此檔案「通常」比較小。（講「通常」是因為如果你硬要用向量模式來呈現點陣的效果，那檔案將非常巨大。）

向量圖的檔案紀錄座標、曲線、範圍顏色等等資訊。

向量圖檔除了檔案小的優點以外，它最大的優勢還是在不管放多大都不會有失真或馬賽克鋸齒的問題。

 

 

製作 SVG 動態圖片

前面說了很多 SVG 的優點，但是在我目前版本的 WordPress 要直接插入 SVG 檔案時，會出現一個安全性的錯誤如下：

所以我們必須先安裝一個外掛叫做「SVG Support」

安裝好就可以以一般上傳圖片的方式，上傳 SVG

前面一直誇 SVG 的檔案很小，到底有多小？
比如說下面這個檔案只有 3k，這在網頁呈現上是很有優勢的。

移動的方塊和球

本來要用截圖方式說明如何製作動態 SVG，但步驟實在太多，步驟圖片做完都老了，所以直接用影片說明。

這個影片會包含以下內容：

  • 使用線上工具 https://app.svgator.com/ 免費製作SVG動態圖檔
  • 線上工具只有14天試用期，過期後要再申請試用需使用不一樣的 email ，所以可以用免洗email ( https://10minutemail.com/)申請，好壞。
  • 用 illustrator 製作 SVG 圖層 (把要一起動的元件 group 起來 )
  • 匯入靜態 SVG 到線上工具去編輯製作出動態 SVG
  • 要把元件加到時間軸的方式是先選擇元件，再按時間軸開端的+號，選擇要加入的運動類型。
  • 匯出的時候選擇”CSS“(不要選Javascript)匯出比較不會有問題。
  • 注意：每個免費帳號只有3次匯出的機會，要確定所有動作都設定好了再按匯出，不然三次用完，也不想付錢的話，就只能再申請一個免費帳號重做了。

＊因為教了使用免洗 email 再次申請試用版，雖然也算合法使用但有點取巧就是了，所以還是要平衡報導一下：使用試用版功能上還是有比較多限制，如果想要進階功能能力也允許，也可以考慮升級付費版。

 

 

 

製作 GIF 動態圖片

如果你會用 Photoshop 那 Photoshop 裡面就有這樣的功能，不過如果你會用 Photoshop 應該也不用看這篇了，所以我在這邊不介紹用 Photoshop 製作動態 GIF的方式。

1.首先你要有幾張圖（圖片哪裡來我不管），比如說你有以下兩張圖，想要把它做成動態循環

2.先到這個網站https://ezgif.com/maker

點「選擇檔案」上傳你的圖檔。

3.兩張圖一起選起來，再按確定

4.看到這邊顯示兩個檔案已經上傳，點藍色按鈕「Upload and make a GIF」

5.接下來可以設定每張圖片停留的時間，以及是否要疊加圖層，如果你是透明背景，沒有要把下一張圖疊在上一張圖上面，就勾選下方說明的那個選項。好了就按「Make a gif」

6.往下捲會看到 GIF 已經製作好了，按最右邊那個 SAVE 的按鈕就可以下載下來。

7.下載下來後，在 WordPress 裡面就和插入圖片一樣的做法就可以放到文章裡面。