做簡報、寫技術文章、畫系統架構圖的時候，你一定遇過這個情況：需要某個品牌的 Logo——React、Stripe、PostgreSQL、OpenAI——然後開始在 Google 圖片裡撈，撈到一張背景有白邊的 PNG，放進圖裡怎麼看都不對。
svgl.app 就是為了解決這件事而生的專案：一個收錄 669 個品牌 SVG Logo 的開源圖庫，全部向量、可縮放、含深淺色版本，點一下就複製帶走。
一、svgl 是什麼？
svgl 是一個由開發者 pheralb 從 2022 年維護至今的開源專案，首頁就是一面 Logo 牆。它的定位很純粹：
「A beautiful library with SVG logos.」
它解決的痛點非常具體：
| 傳統做法 | svgl 做法 |
|---|---|
| Google 圖片撈 PNG，有白邊、解析度差 | 直接給向量 SVG，任意縮放不失真 |
| 找不到深色版，深色簡報放上去看不見 | 每個 Logo 常備 light / dark 雙版本 |
| 不確定是不是官方檔案 | 每個 Logo 都附上官方網站連結 |
| 要手動開繪圖軟體轉檔 | 一鍵複製 SVG 程式碼 |
目前站上共有 669 個品牌，依分類整理（Software 約 97 個、Library 25 個，另有 AI、Design、Devtool、Database、Crypto、Themes、Platform、Hosting… 等類別）。
二、四種實用取得方式
1. 網頁直接複製（最直覺）
點開任一 Logo → 複製 SVG 原始碼 → 貼進你的 HTML／Figma／簡報。
2. 免費 REST API（最好用）
svgl 提供完全免費、無需驗證的 REST API：
# 取得全部（可用 limit 限制）
https://api.svgl.app?limit=10
# 依分類
https://api.svgl.app/category/software
# 搜尋
https://api.svgl.app?search=stripe
# 取得優化過的 SVG 程式碼（底層用 svgo）
https://api.svgl.app/svg/adobe.svg
# 取得未優化版本
https://api.svgl.app/svg/adobe.svg?no-optimize
# 分類清單與各分類數量
https://api.svgl.app/categories
回傳格式（TypeScript 型別官方也有提供）：
export interface SVG {
id: number;
title: string;
category: string | string[];
route: string | { dark: string; light: string };
url: string;
wordmark?: string | { dark: string; light: string };
brandUrl?: string;
}
⚠️ API 限制與禮儀：官方說明 API 有速率限制，建議自行快取回應（例如數分鐘），且明確寫著：「不要用這個 API 去做出跟 SVGL 一模一樣的產品」——它的用途是給擴充套件、外掛與社群工具。
3. 13 種社群擴充套件
這是 svgl 生態最猛的地方——社群自己長出了一整套工具鏈：
| 工具 | 用途 |
|---|---|
| SVGL CLI | 命令列直接把 SVG 加進專案 |
| Figma Plugin | 在 Figma 裡直接插入 svgl 的 Logo |
| VSCode Extension | 在編輯器內搜尋貼上 |
| Raycast / PowerToys / Flow Launcher | 快速啟動器裡搜尋複製 |
| SVGL for React / Vue / Svelte | 三個框架的官方風格 NPM 套件 |
| SVGL Badge | 生成帶品牌 Logo 的徽章 |
| Framer Plugin | Framer 設計工具整合 |
| SVGL for PowerShell | PowerShell 環境取用 |
4. 自己貢獻一個 Logo
流程意外的簡單：
- 把
.svg放進static/library/（單檔上限 21KB，需用 SVGOMG 優化，不可移除viewBox） - 在
src/data/svgs.ts加入一筆資料（支援單色／雙色／wordmark／深淺色四種結構） - 開 PR
三、技術棧拆解：一個現代 Svelte 專案的教科書
svgl 的技術選型很值得前端開發者參考：
| 層級 | 技術 | 說明 |
|---|---|---|
| 框架 | SvelteKit + Svelte 5 | 全站主體 |
| 語言 | TypeScript | 型別安全 |
| 內容管理 | Content-Collections | 把內容轉成型別安全的資料集合，省掉手動 fetch／parse |
| 語法高亮 | Shiki | 顯示 SVG 程式碼用 |
| 樣式 | Tailwind CSS | Utility-first |
| 元件 | bits-ui | Svelte 的 headless 元件庫 |
| 樣式工具 | clsx + tailwind-merge | 受 shadcn/ui 啟發的 className 組合 |
| 圖示 | Lucide Icons、svelte-sonner | 圖示與 toast |
| 後端 | Express + Redis | API 服務與快取 |
專案數據：6,290 stars / 867 forks / MIT 授權，2022-01-16 建立，2026-09 仍在活躍更新（topics 帶 hacktoberfest，長期接受社群貢獻）。
四、⚠️ 使用前必讀的授權提醒
這點很多介紹文不會講，但很重要：
「Each SVG includes a link to its respective product. Permission must be obtained before using a logo.」
也就是說：
- svgl 給的是檔案的便利性，不代表你取得商標使用授權
- Logo 是各公司的商標，商業使用（產品頁、行銷素材、客戶案例）前應確認該品牌的 Brand Guidelines
- 若你是商標持有人，想要求移除，官方提供 GitHub Issue 管道
實務建議：技術文章、簡報、架構圖、教學用途通常沒問題；商業產品的 UI 或廣告素材請先查該品牌的商標規範。
五、誰適合用 svgl？
| 使用者 | 用得到的地方 |
|---|---|
| 技術寫作者／部落客 | 文章裡的工具比較表、架構圖 |
| 前端開發者 | README 的技術棧徽章、About 頁的整合 Logo |
| 簡報／提案 | 客戶案例、技術架構頁 |
| 設計師 | Figma 插件直接拉，不用再找素材 |
| 自動化開發者 | 用 API 把 Logo 動態塞進儀表板、狀態頁 |
結語：小而美的開源典範
svgl 不是什麼改變世界的大專案，但它示範了三件值得學習的事：
- 解決一個夠小、夠具體的痛點（「我要一個乾淨的品牌 SVG」）——小到能一個人維護，具體到人人有需求
- 開放 API 讓社群長出生態——13 個擴充套件全部是社群自建，本體只提供資料與規則
- 現代 Svelte 技術棧的實戰樣板——SvelteKit 5 + Content-Collections + Redis 的組合，很適合當作中小型內容網站的參考架構
如果你還沒把 svgl 加進書籤，現在是最好的時機。
資料來源：svgl.app 官方網站與 API 文件、GitHub pheralb/svgl（README 與 Repository API 統計），查證於 2026-09。
📌 延伸閱讀：本站〈2026 SEO、GEO 與 AEO 完整策略指南〉談網站內容架構，而 svgl 的 Content-Collections 做法也是很好的型別安全內容管理範例。