重點整理
SVGator 是在瀏覽器裡製作 SVG 動畫的線上工具，不用寫程式，註冊後就能用時間軸替圖形加上移動、旋轉、縮放等動畫。2026 年 10 月的方案：免費版可以使用完整編輯器與所有動畫器，但只能匯出靜態 SVG；要匯出會動的 SVG 或 Lottie 需 Starter 方案（年繳每月 20 美元起），GIF 與影片需 Pro 方案。做好的動畫可以用官方外掛或 HTML 區塊放進 WordPress。
網站上會動的 Logo、會跳動的圖示、載入中的小動畫，很多都是 SVG 動畫：檔案小、放大不會糊，還能做出滑鼠滑過才播放的互動效果。以前要做這種動畫得手寫 CSS 或 JavaScript，SVGator 把它變成像剪影片一樣拉時間軸就能完成。這篇整理 SVGator 現在能做什麼、免費版做到哪裡、每個方案能匯出什麼格式，以及做好的 SVG 動畫怎麼放進 WordPress 網站。
SVGator 是什麼？
SVGator（svgator.com）是一套線上的 SVG 動畫編輯器，打開瀏覽器就能用，不必安裝軟體。你可以匯入在 Illustrator、Figma 畫好的 SVG，也可以直接在 SVGator 裡畫，再替圖形的各個部位加上動畫，最後匯出成網頁可以直接使用的動態 SVG 檔。
SVGator 主打「不用寫程式」：動畫的程式碼會在匯出時自動產生。官網只有英文版，官方說明文件裡的編輯器畫面也是英文，但操作邏輯跟一般影片剪輯、簡報動畫類似，看得懂 Position（位置）、Scale（縮放）、Rotate（旋轉）這類單字就能上手。
官網首頁上方的 Make 選單列出各種用途，例如 Logo 動畫、圖示動畫、載入動畫、Lottie 檔編輯；Integrations 選單則是 Figma 與 WordPress 外掛。要開始製作，點右上角「Sign up」註冊帳號，或用 Google、Facebook 帳號登入。
SVG 動畫跟 GIF、Lottie、影片有什麼不同？
SVG（Scalable Vector Graphics，可縮放向量圖形）是用程式碼描述線條與形狀的圖片格式，所以放大到多少都很清晰。動態 SVG 則是在這份檔案裡再加上動畫指令，由瀏覽器即時播放。和其他常見的動畫格式比較如下：
簡單來說：放在網站上的 Logo、圖示、按鈕、載入動畫，用動態 SVG 最合適；要貼到社群、Email 或不能放程式碼的平台，才需要轉成 GIF 或影片。Lottie 也是向量動畫格式，常用在 App，網頁上需要搭配 Lottie 播放器程式才能播放。
SVGator 免費版可以做什麼？
這是 SVGator 跟幾年前差最多的地方。舊版的免費方案可以匯出少量帶浮水印的動畫，2026 年 10 月官網的免費方案改為：
- 可以：使用完整的編輯器與所有動畫器（Animators）、無限次匯出靜態 SVG、使用素材庫與免費動畫範本，不需要綁信用卡。
- 不行：匯出任何「會動」的檔案。動態 SVG、Lottie、React Native 與 Flutter 格式要 Starter 方案；GIF 與影片要 Pro 方案。
換句話說，免費版很適合用來學習、試做，確定做得出想要的效果再付費匯出；如果只是想把一張圖片做成會動的 GIF 貼社群，免費版做不到。
SVGator 價格與各方案差異
SVGator 有 Free、Starter、Pro、Team 四種方案，價格以美元計，年繳比月繳便宜。以下是 2026 年 10 月 1 日官網價格頁的內容：
| 方案 | 年繳（每月） | 月繳 | 主要差別 |
|---|---|---|---|
| Free | 0 | 0 | 完整編輯器、所有動畫器、只能匯出靜態 SVG |
| Starter | US$20 | US$28 | 匯出動態 SVG（CSS／JS）、Lottie、React Native、Flutter；可做互動動畫 |
| Pro | US$24 | US$38 | Starter 全部功能，加上無限匯出動畫、GIF 與影片、公開分享連結與留言 |
| Team | US$27／人 | US$40／人 | Pro 全部功能，加上多人共同編輯與團隊工作區，最少 3 人、最多 10 人 |
如果只是要做網站用的 SVG 動畫，Starter 就夠用；需要同一個動畫另外輸出 GIF 給社群或 Email 用，才需要 Pro。價格與方案內容常會調整，付費前請以官網價格頁為準。
SVGator 可以匯入、匯出哪些格式？
匯入方面，SVGator 支援靜態 SVG、PNG、JPEG、GIF 與 Lottie JSON（Lottie 匯入官方標示仍在測試階段）。要特別注意：匯入的 SVG 必須是靜態檔案，已經有動畫的 SVG 匯入後只會剩第一個畫面；PNG、JPEG 這類點陣圖能套用的動畫也比較少，最好還是用向量圖。
匯出方面，價格頁的方案比較表列得很清楚：
動態 SVG 匯出時要選動畫類型：CSS 檔案比較小、效能好，可以直接當圖片使用；JavaScript 支援的動畫效果較多（例如 Morph 變形、路徑動畫），也能做「點擊播放」「捲動到畫面才播放」這類互動，但放進網頁的方式有限制，下面會說明。
SVGator 怎麼用？做一隻會走路的貓
網路上很多人搜尋「SVG 動態貓咪」的做法，以下用鵠學苑做過的貓咪走路動畫為例。整個製作流程大致分成五步：
步驟一：準備分好圖層的 SVG
在 Illustrator、Figma 等向量軟體畫好圖之後，把要動的部位分開成獨立的圖層或群組，並取好名字，例如貓咪的頭、身體、尾巴、四隻腳各一層。匯入 SVGator 後圖層會保留下來，之後才能分別替每個部位加動畫。
步驟二：註冊登入並匯入檔案
在官網右上角點「Sign up」註冊，或用 Google、Facebook 帳號登入，新增專案（New project）並設定畫布尺寸，再匯入準備好的 SVG。也可以用 SVGator 內建的繪圖工具直接畫。
步驟三：替元件加上動畫
在左側的元件清單或畫布上選取要動的部位，按右鍵選「Animate」，再挑要用的動畫器。常用的有：
- Position（位置）：移動元件，例如讓貓咪往前走。
- Rotate（旋轉）：讓腳前後擺動、尾巴搖動。
- Scale（縮放）、Skew（傾斜）：做出呼吸、彈跳的感覺。
- Opacity（透明度）：淡入淡出。
加上動畫器後，元件會出現在下方時間軸，並在播放頭的位置建立第一個關鍵影格。把播放頭往後移，再調整元件的位置或角度，就會自動新增第二個關鍵影格，兩個影格之間的變化就是動畫。轉動元件之前，記得先確認旋轉中心（origin point）的位置，例如貓腳要以腿根為中心擺動，而不是腳掌中間。
上圖是鵠學苑先前實作時的編輯器畫面，目前官方說明文件的操作方式相同：右鍵選單的 Animate、左側元件清單、下方時間軸與右側屬性面板。按下時間軸左邊的播放鍵就能預覽動畫，覺得太生硬可以在關鍵影格加上緩動（Easing）讓動作更自然。
步驟四：匯出動畫
完成後點右上角「Export」，選擇匯出格式。網站用的話選 SVG，再選 CSS 或 JavaScript 動畫類型；需要 GIF 或影片則選對應格式。前面提過，免費版這一步只能匯出靜態 SVG，要匯出會動的檔案需先升級方案。
這隻貓是鵠學苑早期用免費版匯出的成品，右下角帶有浮水印；現在的免費版已經不能匯出動畫，付費方案匯出的檔案沒有浮水印。
做好的 SVG 動畫怎麼放進 WordPress？
WordPress 基於安全考量，預設不讓媒體庫上傳 SVG 檔，而且用 JavaScript 類型匯出的動態 SVG，直接上傳還可能被處理成不會動。常見有三種做法：
- 安裝 SVGator 官方外掛：在 WordPress 後台搜尋外掛「SVGator」安裝啟用，到外掛設定頁按 Login 連結 SVGator 帳號並授權，選擇專案後按「Import to media」匯入媒體庫，就能在文章或頁面裡使用。要放在小工具裡的動畫，請用 CSS 類型匯出。外掛直接讀取你 SVGator 帳號裡的專案，動畫有修改時可以重新匯入更新，不必再手動上傳檔案。
- 自訂 HTML 區塊：把匯出的 SVG 檔放在主機或雲端儲存空間，在區塊編輯器新增「自訂 HTML」區塊，用
<object type="image/svg+xml" data="檔案網址"></object>引用。滑過、點擊這類互動動畫要用這個方法。 - 當成一般圖片：CSS 類型的動態 SVG 可以用
<img>標籤顯示並自動播放，適合 Logo、圖示這類單純循環的動畫；但<img>不支援滑過、點擊等互動。
要注意的是，SVG 檔案裡可以夾帶程式碼，所以不建議為了方便就讓網站所有使用者都能上傳 SVG。只放自己做的、或來源可信的檔案。需要現成的 SVG 素材練習，可以參考 SVG DOODLES 手繪 SVG 素材；只是想在網站加上會動的小圖示，也可以先看看 Animated icons 動態圖標 這類現成資源。
常見問題
SVGator 免費版可以匯出動畫嗎？
不行。2026 年 10 月的免費方案只能匯出靜態 SVG，動態 SVG 與 Lottie 需 Starter 方案，GIF 與影片需 Pro 方案；但免費版可以使用完整編輯器和所有動畫器，適合先試做。
SVGator 有中文介面嗎？
目前沒有。官網只有英文版，說明文件中的編輯器也是英文介面。不過常用的功能名稱不多，記住 Animate、Position、Rotate、Scale、Export 這幾個字，就能完成大部分操作。
SVG 動畫匯出要選 CSS 還是 JavaScript？
單純的循環動畫選 CSS：檔案較小，可以直接用 img 標籤當圖片放。需要 Morph 變形、路徑動畫，或點擊、捲動才播放的互動效果，就選 JavaScript，並改用 object 標籤或內嵌程式碼放進網頁。
結語
SVGator 讓不會寫程式的人也能做出網站用的 SVG 動畫：準備好分層的向量圖，匯入後用右鍵 Animate 加上動畫、在時間軸調整關鍵影格就完成了。免費版可以完整試做，但要匯出會動的檔案需要付費，網站用途選 Starter 即可，要另外輸出 GIF 或影片再考慮 Pro。做好的動畫放進 WordPress，最省事的是官方外掛；不想裝外掛，就用自訂 HTML 區塊或 img 標籤，並記得只使用來源可信的 SVG 檔。