SVGator 是一個線上 SVG 動畫編輯工具，以往製作 SVG 動畫會需要使用到 CSS 或是 JavaScript 來達成，SVGator 可以透過瀏覽器操作，不需要寫任何程式碼就可以完成一個網頁動畫，設定介面直覺、好操作，一起讓網站圖片動起來吧！
什麼是 SVG？
可縮放向量圖形 (英語：Scalable Vector Graphics，縮寫：SVG)，是一種向量圖形格式，具有放大、縮小都不會有鋸齒邊緣的特性，檔案尺寸比 PNG、JPG 還小，常用於網站的 Logo、Icon 等，可以確保圖片在任何大小不失真。
線上 SVG 動畫編輯工具 SVGator
SVGator 是一個線上 SVG 動畫編輯工具，可以透過瀏覽器，不需要另外安裝任何軟體，即可進行 SVG 動畫設定，快速完成一個網頁動畫。
SVGator 連結：https://www.svgator.com/
圖片來源：SVGator
免費版與付費版的差異
SVGator 免費版與付費版詳細差異請參閱：https://www.svgator.com/pricing
免費版
- 一個月可以輸出 3 次動畫
- 時間軸不能超過 10 秒
- 基礎動畫效果
付費版
- 一個月可以輸出 10 次動畫
- 時間軸不能超過 60 秒
- 進階動畫效果
製作 SVG 動畫
利用 Figma 繪製向量圖形
首先需要繪製一個向量圖形，可以透過 Adobe Illustrator、Figma 或其他可以繪製向量圖形的軟體繪製圖片，在這裡我們使用 Figma 進行操作，因為 Figma 在瀏覽器即可進行設計，不需要額外安裝軟體，且在免費的方案就可以完成簡易的向量圖形。
Figma 連結：https://www.figma.com/
Figma 登入後畫面
註冊完成 Figma 後，即可進入如上圖的介面，這時選擇 「New design file」新增檔案。
安裝 Figma Plugin：Iconify 快速建立向量圖形
- 返回 Figma 首頁，點擊「Community」。
- 點選「Plugins」。
- 搜尋「Iconify」後，點擊「Installed」進行安裝。
- 於工作區域點擊滑鼠右鍵，選擇「Plugins / Iconify」展開 Iconify 的視窗。
- 在 Iconify 搜尋欄位搜尋想要的圖形，文字必須要為英文。
- 使用拖拉的方式或是點擊下方按鈕「Import Icon」將圖形插入至工作區域。
網路上也有許多可以取得向量圖形的平台，請參考這篇：如何正確、安全使用免費素材，免費素材網站懶人包 (2021最新) 🙂
- 編輯完成的圖形記得將全部物件群組 (Ctrl+G)。
- 於右側 Export 選擇 SVG 後點擊按鈕輸出圖形。
將向量圖形匯入 SVGator
- 登入 SVGator 後，選擇「Import SVG」，將剛剛輸出的圖形匯入。
- 將滑鼠移動至匯入的圖形，點擊「Open」開啟檔案。
利用 SVGator 製作 SVG 動畫
- 在 Elements 這個區域會顯示組成向量圖形的物件，選擇到的物件會在右側工作區域呈現框選 (藍色框) 的狀態。
- 於物件點選右鍵，選擇「Animate」，有不同的動畫效果可以選擇，如：Position (位置)、Scale (縮放)、Rotate (旋轉) 等，物件選擇動畫效果後，會將效果新增在時間軸。
- 時間軸，可以調整動畫變化的秒數，上排的刻度為時間，1s 表示為 1 秒。
調整時間軸
- 黑色圓圈為此物件的定位點，預設在物件的中心，因此執行任何動畫效果都會從中心開始，例如：從中心縮放；此外，可以透過滑鼠拖曳可以更改物件的定位點。
- 菱形圖示為物件在該秒數呈現的樣式，可以製作位置、大小、透明度等變化。
- 秒數刻度上的尺標表示工作區域目前停留的秒數，如上圖為停留在 0.5s 的時候。
輸出設定完成的 SVG 動畫
- 完成動畫設定後，點擊右上角「Export」。
- 為確保動畫可以在網站上正常運行，在 Animation type 可以選擇「CSS Only」。
- 若希望動畫重複播放，可以選擇「Infinite」。
- 輸出設定完成後，點擊「Export」按鈕，注意上方有顯示每個月剩餘輸出次數。
完成，在網站置入 SVG 動畫吧！
將製作完成的 SVG 檔案上傳至後台媒體庫後，即可將 SVG 圖檔插入至文章或頁面中。
若上傳檔案出現「系統不接受這個檔案類型」的訊息，則需要另外安裝「SVG Support」這個外掛，讓 SVG 檔案可以順利上傳至媒體庫。
完成，一起使用線上 SVG 動畫編輯工具 SVGator，讓網站圖片動起來吧！
