向量圖與 SVG 素材：20 個可縮放、可改色、網站背景與插圖資源整理

快速答案：向量素材適合需要縮放、改色、印刷或放進 Figma 的設計任務。

向量圖和 SVG 的價值不是「看起來比較設計」，而是後續好維護：可以放大不糊、可以改色、可以進 Figma，也可以直接給前端做成網頁圖形。這篇整理網站、簡報、產品頁常用的向量圖與 SVG 素材資源；正文只引用研究表中已查證、截圖通過 QA 的 A/B 資源。

先看分類：SVG 素材不是只有插圖

類型	代表資源	免費/付費	適合用途	授權注意
SVG 背景與圖案	Haikei、Hero Patterns、SVG Backgrounds、Pattern Monster	免費 / Freemium	網站背景、封面、Landing Page、簡報底紋	背景可以商用不代表能當商標；Pro 素材要看方案
形狀產生器	Get Waves、Blobmaker、Shape Divider App	免費	頁面分隔、裝飾圖形、插圖底形、區塊轉場	輸出後要測 RWD、檔案大小和前端載入方式
公共領域向量	Public Domain Vectors、Openclipart	免費	clip art、教育內容、文件配圖、基礎 SVG	公共領域仍要注意商標、人物肖像與第三方權利
開源/免費向量插圖	unDraw、Open Doodles、Humaaans、Open Peeps、illlustrations.co	免費	網站插圖、簡報、產品空狀態、服務流程	可改色不等於可重新販售或註冊商標
商業向量插圖套件	Storyset、DrawKit、Getillustrations、Streamline	Freemium / 付費	SaaS、設計系統、客戶提案、產品 onboarding	免費包、Pro 包、團隊授權與客戶案使用要分開看

挑向量素材前先問 5 件事

• 要用在網站、印刷、簡報，還是 Figma 設計稿？不同場景需要不同格式。
• 素材能不能下載 SVG？如果只有 PNG，就不算真正好維護的向量素材。
• 能不能改色、拆元件、調整線條或進 Figma 編輯？
• 授權是否允許商用、客戶案、廣告、模板、印刷商品？
• 素材是否太常見？如果是熱門 SVG 插圖，最好重新配色或混搭。

20 個向量圖與 SVG 素材資源推薦

1. Haikei

官方網站。可以快速產生多種 SVG 視覺資產，適合網站背景與封面元素

• 價格型態：免費
• 適合用途：背景圖、blob、wave、pattern、漸層 SVG
• 授權注意：可商用；線上產生器輸出需自行保存；若要品牌主視覺仍需二次設計

2. Hero Patterns

官方網站。免費可重複 SVG pattern，適合需要輕量背景素材的網站

• 價格型態：免費
• 適合用途：網站背景、區塊底紋、簡報背景
• 授權注意：可商用；圖案辨識度高，正式品牌案建議改色與調整密度

3. SVG Backgrounds

官方網站。提供可客製的 SVG 背景、icon 與網站圖形，適合快速補背景視覺

• 價格型態：Freemium
• 適合用途：網站背景、Landing Page、封面視覺
• 授權注意：部分可商用；免費與 Pro 素材授權不同；完整商用與高階素材需確認方案

4. Pattern Monster

官方網站。可直接調整顏色與輸出 SVG，適合做可縮放背景圖案

• 價格型態：免費
• 適合用途：可調色圖案背景、網站區塊、社群素材
• 授權注意：可商用；pattern 適合做輔助紋理，不建議直接當品牌唯一識別

5. Get Waves

官方網站。最直接的 SVG 波浪產生器，適合快速做頁面分隔視覺

• 價格型態：免費
• 適合用途：波浪分隔、Landing Page 區塊、頁首頁尾
• 授權注意：可商用；工具產生的是裝飾 SVG；要注意行動版比例與檔案大小

6. Blobmaker

官方網站。可快速輸出有機形狀 SVG，適合做人物插圖背板或背景點綴

• 價格型態：免費
• 適合用途：blob 背景、插圖底形、品牌輔助圖形
• 授權注意：可商用；blob 風格常見，需搭配品牌色與其他元素避免模板感

7. Shape Divider App

官方網站。專門做 SVG 分隔形狀，適合網站段落之間的視覺過渡

• 價格型態：免費
• 適合用途：網頁區塊分隔、Landing Page、活動頁
• 授權注意：可商用；產生圖形需自行測試 RWD；過多分隔形狀會讓頁面顯得吵

8. Public Domain Vectors

官方網站。大量公共領域向量圖，適合找基礎圖形、clip art 與教學配圖

• 價格型態：免費
• 適合用途：公共領域向量圖、clip art、教育內容
• 授權注意：可商用；公共領域素材仍需注意人物、商標與第三方權利；品質落差較大

9. Openclipart

官方網站。老牌公共領域 clip art 圖庫，適合找可下載的 SVG/PNG 基礎素材

• 價格型態：免費
• 適合用途：clip art、教育插圖、文件配圖、基礎 SVG
• 授權注意：可商用；素材品質與風格不一；正式商案要重新篩選與整理

10. unDraw

官方網站。免費 SVG 插圖代表資源，可改色，適合介紹向量插圖與網站配圖

• 價格型態：免費
• 適合用途：網站插圖、簡報、產品空狀態
• 授權注意：可商用；授權禁止重新販售、建立競品圖庫或用於商標註冊；風格辨識度高

11. Storyset

官方網站。可自訂顏色與動畫，適合需要 SVG 插圖和簡報素材的任務

• 價格型態：Freemium
• 適合用途：網站段落圖、簡報、動畫 SVG 插圖
• 授權注意：部分可商用；免費下載通常需要標註來源；Magnific 相關授權與會員方案需依用途確認

12. DrawKit

官方網站。提供成套 2D/3D 插圖與 icon，適合產品頁面快速建立視覺系統

• 價格型態：Freemium
• 適合用途：SaaS 網站、Landing Page、產品說明插圖
• 授權注意：部分可商用；免費包與付費包授權不同；高階套件需購買或訂閱

13. ManyPixels Gallery

官方網站。免費插圖量大且可按風格分類，適合找常見商業情境向量圖

• 價格型態：免費
• 適合用途：部落格插圖、簡報、網站區塊、社群素材
• 授權注意：可商用；免費圖庫以 ManyPixels 既有風格為主；不可重新販售素材本身

14. IRA Design

官方網站。可組合與改色，適合需要比單張插圖更有系統感的 SVG 視覺

• 價格型態：免費
• 適合用途：品牌插圖、網站主視覺、可改色 SVG
• 授權注意：可商用；素材風格固定；若用在品牌核心視覺，需要二次設計避免撞圖

15. Open Doodles

官方網站。開源手繪向量插圖經典資源，授權友善，適合趣味型頁面

• 價格型態：免費
• 適合用途：手繪風網站、簡報、社群貼文
• 授權注意：可商用；CC0 雖自由度高，但手繪風格鮮明；不適合所有品牌調性

16. Humaaans

官方網站。可混搭人物姿勢與服裝，是人物向量插圖常用入門資源

• 價格型態：免費
• 適合用途：人物組合、團隊介紹、服務流程、簡報
• 授權注意：可商用；開源人物風格使用者多，若要品牌差異需重新配色或混搭

17. Open Peeps

官方網站。人物零件可混搭，適合做角色群像與使用者情境 SVG

• 價格型態：免費
• 適合用途：人物頭像、角色狀態、服務流程、簡報
• 授權注意：可商用；黑白手繪風格強烈；公開商業網站常見，需注意辨識度

18. illlustrations.co

官方網站。開源插圖包簡單直接，適合需要 SVG/PNG 快速下載的內容工作

• 價格型態：免費
• 適合用途：網站配圖、簡報、部落格、App 空狀態
• 授權注意：可商用；套件數量有限；風格固定，適合小型專案或文章配圖

19. Getillustrations

官方網站。資源量大且偏商業產品視覺，適合找成套向量插圖

• 價格型態：Freemium
• 適合用途：產品網站、Icon 系統、插圖套件、客製插圖
• 授權注意：部分可商用；多數高品質套件為付費；免費包與付費包授權範圍需分開確認

20. Streamline Illustrations

官方網站。品質與一致性高，適合長期維護的產品介面與設計系統

• 價格型態：Freemium
• 適合用途：產品 UI、設計系統、App onboarding、專業商業頁
• 授權注意：部分可商用；免費方案限制較多；完整下載、商用與團隊使用多半需付費

使用情境建議

網站背景與區塊裝飾

Haikei、Hero Patterns、SVG Backgrounds、Pattern Monster 適合做背景和幾何紋理。這類素材要注意密度，不要讓背景搶走文字可讀性。

Landing Page 的波浪、blob、分隔線

Get Waves、Blobmaker、Shape Divider App 適合快速做頁面轉場。輸出後不要只看桌機，行動版寬度、裁切和檔案大小都要測。

產品空狀態與流程插圖

unDraw、Storyset、ManyPixels、Humaaans、Open Peeps 適合產品 onboarding、空狀態和服務流程。使用前先統一品牌色，避免不同套素材混在一起。

簡報、文件與教育內容

Public Domain Vectors、Openclipart、Open Doodles、illlustrations.co 適合快速補圖。公共領域素材很方便，但品質落差大，正式交付前要重篩。

長期商業專案

DrawKit、Getillustrations、Streamline 這類商業套件比較適合長期專案。雖然成本較高，但風格一致性、格式完整度和後續維護通常比較省時間。

SVG 上線前檢查清單

• 用 SVGOMG 或 SVGO 類工具壓縮，移除不必要 metadata。
• 確認 viewBox 正確，避免放到網站後被裁切或比例跑掉。
• 裝飾性 SVG 要加適當 alt 或 aria-hidden，避免干擾讀屏。
• 品牌 Logo、人物、商標相關圖形不要只看檔案授權，還要查權利限制。
• 大量 SVG 不要全部 inline，依前端需求決定 inline、sprite 或圖片載入。

FAQ

SVG 可以直接貼到 Figma 嗎？

大多數 SVG 可以直接貼到 Figma，但複雜漸層、遮罩、濾鏡可能會跑版。正式使用前要檢查圖層、顏色和輸出結果。

向量圖和插圖素材差在哪？

向量圖是格式和結構概念，重點是可縮放、可編輯；插圖素材是內容類型，可能是 SVG、PNG 或其他格式。這篇偏向可編輯、可上線的 SVG/向量資源。

免費 SVG 可以用在商標嗎？

通常不建議。很多免費素材禁止註冊商標、重新販售或建立素材庫。品牌核心識別最好自己設計或購買明確授權。

SVG 上線前要注意什麼？

先壓縮、檢查 viewBox、移除不必要程式碼，再確認是否需要 alt。若 SVG 來自外部，前端也要注意不要直接插入不可信的程式碼。

向量素材適合印刷嗎？

可以，但要確認輸出格式、色彩模式和授權。網站用 SVG 不等於印刷一定可用，印刷前最好轉成設計軟體可控的格式並檢查解析與色彩。

延伸整理

• 看更多創作邦設計資源
• 看設計素材入口
• 看插圖素材網站整理

最後更新：2026-06-27。本文是設計資源整理，不取代各網站最新授權條款。授權不確定時，請在專案內標註「需自行確認授權」。