TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Storyset 免費插圖：改色後下載 SVG、GIF 或 MP4
Storyset可改色、選背景並匯出SVG、PNG或動畫。本篇整理五種風格、GIF與MP4的效果限制、免費署名及Flaticon Premium條件，並比較unDraw、ManyPixels的自訂授權。
用 AI 摘要這篇文章：
Storyset提供可改色、選背景與隱藏元素的插圖，並有動畫編輯與多種匯出格式。免費使用仍須遵守署名及用途條款，免署名需符合Flaticon Premium與下載條件。先選用途，再核對實際插圖選項與授權，不能把免費當成所有使用方式都無限制。
目錄
把免費插圖加上顏色、背景、動畫的線上編輯器
Storyset提供商業、教育、醫療、科技等主題插圖。其營運與權益應依Storyset條款確認；不因同為設計工具就把Icons8等其他服務列為同一公司產品，也不以未核實的「數萬張」作為比較依據。
依官方FAQ，可調整顏色、背景及元素顯示，再進入Animate it設定動畫。這些是公開功能說明；本文未用同一專案比較其他工具，不宣稱流程一定更少或更快。
登入方式與素材授權是不同問題。依Storyset 條款第 6 節，免費使用須依平台要求署名；免署名則需 Flaticon Premium，並在訂閱有效期間下載素材。不能只因為持有 Freepik 帳號或訂閱，就認定已取得 Storyset 免署名權利。
Storyset、unDraw與ManyPixels授權比較
在深入了解 Storyset 的功能之前，先看它和其他主流免費插圖平台的差異，幫你快速判斷哪個工具最適合自己的需求。
比較工具時，先看需要的是靜態插圖、可修改的向量檔，還是動畫輸出，再核對授權。ManyPixels 官方圖庫採自訂授權，可免費使用且不要求署名，但禁止將素材打包散布或用來建立類似、競爭服務等用途；不能把它當成 CC0。
五種插圖風格：加入Cuate，選項依插圖確認
本次官方首頁列Rafiki、Bro、Amico、Pana與Cuate五種風格；FAQ背景段落仍使用「四種」說法，兩者沒有完全同步。因此本文不再把四種當成完整清單，實際可用背景與圖層以選中的插圖為準。
先比較相同主題在各風格的角色比例、線條、場景細節與留白，再挑適合版面的插圖。不要把風格名稱當成所有作品都具有相同構圖或背景功能的保證；同一專案可記下風格與色碼，逐張核對一致性。
可從首頁風格與主題入口找圖，再依實際篩選選項縮小範圍。英文場景詞如business meeting、remote work可作搜尋起點，但本文沒有中英文查詢比較，不宣稱英文一定更精準或結果更多。
客製化編輯：顏色、背景與圖層
點進一張插圖之後，右側會出現編輯控制面板。Storyset 的客製化分為三個層次，每個層次都可以獨立調整。
配色系統
官方FAQ說明Change color可選預設顏色、使用色盤或輸入RGB／Hex。設定後檢查實際變色範圍與背景對比，不保證全部元素自動形成符合品牌需求的配色；必要時下載SVG再依授權與編輯器能力處理。
背景三模式
FAQ列Hidden、Simple與Detailed背景選項，並對不同風格列出差異；但該段尚未涵蓋首頁的Cuate。請開啟目標插圖確認可用選項，匯出後再檢查背景是否如預期，不把FAQ舊清單套用到每張作品。
圖層控制
每張插圖都由多個可獨立控制的圖層組成，操作邏輯類似 Photoshop。你可以自由切換每個圖層的顯示或隱藏，把不需要的元素移除，只保留想要的。透過不同圖層的組合，同一張插圖就能產出多種截然不同的版本。這對於需要一系列風格統一但內容各異的插圖專案來說非常實用。
動畫功能：讓插圖動起來
在插圖編輯頁面點選「Animate it」按鈕，就會進入動畫編輯模式。Storyset 提供兩大類動畫效果：
進場動畫（Entrance）：包含淡入（Fade In）、上滑（Slide Up）、下滑（Slide Down）、左滑（Slide Left）、右滑（Slide Right）、放大（Zoom In）、縮小（Zoom Out）、左彈（Light Left）、右彈（Light Right）共 9 種效果。每種進場動畫都可以設定 Easing 模式（Toon、Linear、Ease-in、Ease-out）、持續時間和延遲時間，還能勾選「Animate children」讓子元素分別出場。
循環動畫（Looping）：包含搖晃（Shake）、旋轉（Spin）、浮動（Floating）、心跳（Heartbeat）、風吹（Wind）共 5 種效果，適合讓插圖保持持續的動態感。
Randomize可產生一組動畫設定，Reset可移除動畫。若使用隨機結果，先檢查閱讀順序、動作是否遮擋內容與循環銜接，再決定是否保留；本文沒有操作耗時比較，不把隨機生成當成保證省時。
重要限制：GIF 和 MP4 格式無法同時包含進場動畫和循環動畫。如果你需要兩種效果，必須分別匯出兩次。HTML 格式則沒有這個限制，可以在同一個檔案中包含兩種動畫類型。如果你要把動畫嵌入網頁，HTML 格式是最完整的選擇，效果跟 LOADING.IO 產生的載入動畫類似。
匯出格式完整比較
Storyset 支援五種匯出格式，每一種都有最適合的使用場景：
| 格式 | 使用方向 | 輸出後檢查 |
|---|---|---|
| SVG | 向量插圖與後續編輯 | 目標系統是否允許，字形、圖層及外觀是否保留；不保證永遠最小 |
| PNG | 靜態圖片 | 尺寸、透明背景與在目標版面的清晰度 |
| HTML | 官方FAQ描述為inline SVG與CSS的網頁動畫 | 目標網站的嵌入與樣式限制，以及實際播放 |
| GIF | 動畫圖片 | 顏色、背景、循環與平台能否播放；不能同時匯出進場及循環效果 |
| MP4 | 影片工作流程 | 尺寸、背景與播放；不能同時匯出進場及循環效果 |
依目標網站、簡報或影片工具接受的格式選擇，再用小範例確認顯示與播放。GIF不一定在每個社群平台以相同方式播放，MP4也不保證比每張GIF更小；先看實際輸出與接收端要求，保留原檔。
授權條款與商用規範
免費使用 Storyset 插圖須依平台要求標示來源，並同時遵守用途限制。請核對下載時提供的署名方式和授權條款；署名不是所有商業用途都獲准的保證，標示為 editorial 或符合條款所列編輯用途情況的素材，不能用於產品或服務的廣告、行銷。
免署名需購買 Flaticon Premium，並在有效訂閱期間下載 Storyset 素材。保存下載及授權紀錄；付費不會解除轉售、轉授權或其他用途限制。交付客戶專案時，也應核對條款列出的第三方使用條件，而不是把原始素材當成可任意再分發的檔案。
適合誰、不適合誰
適合的使用者：
- 需要品牌配圖的設計與行銷人員：可用色碼與圖層調整內容，但仍須逐張核對構圖、線條與背景，不保證只選同一色碼就能完全一致。
- 前端開發與網站內容：先確認系統接受的格式。WordPress預設不允許一般SVG媒體上傳；如需支援，應核對既有安全處理方案，不只是放行副檔名。純靜態插圖可先評估PNG。
- 需要快速產出動態視覺的內容創作者：GIF 和 MP4 匯出讓你不用打開 After Effects 或其他專業動畫軟體，就能為社群貼文或 YouTube 影片加入動態插圖。
不適合的使用者：
- 需要照片級真實感素材的人：Storyset 只提供向量插圖，沒有照片素材。如果你需要真實照片，建議到 免費圖庫 平台尋找。
- 需要完全免署名的免費方案：免費版必須標註來源。如果你不能接受署名要求，需要付費取得 Flaticon Premium 授權，或者改用 CC0 授權的平台如 Open Doodles。
- 主要使用手機：先在自己的裝置測試選圖、調色與匯出控制。本文未測手機完整流程，也未驗證同名App的官方身分，不直接以不存在App或桌面必然更好作結論。
實際應用場景與工作流程
網站設計：插圖應補充頁面內容，避免遮住主要操作。先檢查手機版尺寸、文字對比與載入，再決定是否加入；404或空狀態仍需清楚指出下一步，不能只靠裝飾圖提升體驗。
簡報製作：投影片搭配一張客製化過的插圖，不僅幫助觀眾理解內容，也讓簡報的專業度提升。你可以根據簡報主題選擇對應插圖，再用品牌色進行配色，讓簡報跟公司的視覺識別一致。也可以搭配 Slidesgo 的簡報範本一起使用，效果更好。
社群與電子報：先確認接收平台如何處理GIF或MP4，並保留靜態呈現方式。本文沒有社群互動率比較，不宣稱動畫必然比靜態圖更有效；壓縮前也要確認工具支援該格式並保留動畫。
同一專案需要多張插圖時，先記錄風格與配色，再逐張核對輸出是否一致。處理 SVG 檔案大小時，選擇支援 SVG 的工具並保留原檔；最佳化後檢查文字、圖層及動畫是否正常，不要只看檔案變小就認定結果可用。
Storyset 可下載 SVG，不代表每個 WordPress 媒體庫都能直接接受。WordPress 官方預設 MIME 清單未列 SVG；網站若要支援，需先確認採用的上傳允許與 SVG 安全處理方式，不要只解除副檔名限制。若只需要靜態插圖，可先使用 PNG；GIF 或 MP4 也應核對網站允許的格式及大小，上傳後檢查手機版顯示。
三個立即下一步
- 先試一張插圖：確認授權、風格與色碼，調整可用背景和圖層，下載後在目標版面驗收；本文未測所需時間，不保證5分鐘內完成。
- 試做一段 HTML 動畫：選一張插圖點「Animate it」，按幾次 Randomize 找到喜歡的效果，然後匯出 HTML 格式。把 HTML 檔案嵌入到你的網頁中，觀察動畫在實際環境中的流暢度和視覺效果。
- 確認授權是否符合你的需求：如果你要商用且不能署名，需要取得 Flaticon Premium 授權。如果可以署名，免費方案就能滿足大部分需求。建議先確認你的專案對署名的要求，再決定是否需要付費。
Storyset 常見問題 FAQ
Storyset 完全免費嗎？
Storyset 可在遵守條款及署名要求下免費使用。免署名的條件是 Flaticon Premium 訂閱及有效期間內下載，不應把免費版描述成只有署名這一項限制；用途、轉售及第三方使用仍受條款規範。
Storyset 的插圖可以用在商業專案嗎？
可依授權允許的用途使用，但免費署名或付費免署名都不等於任何商用方式皆可。先檢查素材是否適用 editorial 限制、是否涉及轉售或轉授權，以及交付客戶時的使用條件。
Storyset 和 Freepik 是什麼關係？
Storyset 由 Freepik Company 營運，但公司相同不代表訂閱權益相同。Storyset 官方條款指向 Flaticon Premium 免署名授權，不能直接把 Freepik Premium 當成同一項權益；購買前應核對訂閱頁與素材授權。
Storyset 動畫可以放在 YouTube 影片嗎？
MP4 動畫能否用於 YouTube 作品，仍須依素材授權與用途判斷。免費使用須署名；免署名須符合訂閱與下載條件。放在片頭、片尾或轉場不會自動排除其他權利限制，不能保證任何用法都沒有版權問題。
Storyset 匯出的 SVG 可以再編輯嗎？
可以。Storyset 匯出的 SVG 檔案是完全可編輯的向量格式，你可以用 Adobe Illustrator、Figma、Sketch、Inkscape 等向量繪圖軟體開啟並修改。
如果你對更多免費設計資源有興趣，也歡迎參考我們整理的免費圖庫總整理，收錄了 50 個以上高品質的免費圖庫和素材網站。你也可以看看 photoAC、Open Doodles 等其他優質免費素材資源。
