TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Svgl 免費 SVG Logo 圖庫，彩色品牌標誌直接下載還能接 API
Svgl 是 2022 年起由開發者 Pablo Hdez 維護的開源 SVG 品牌標誌圖庫，收錄 679 筆彩色標誌與 wordmark，免帳號直接下載、複製 JSX，也提供免金鑰 API。這篇整理它與 Simple Icons 的分工、可預測的直接抓檔網址規則、API 實測細節，以及 MIT 授權沒有涵蓋的商標權邊界。
用 AI 摘要這篇文章：
開發者需要放品牌標誌的場合比想像中多：產品官網的技術棧區塊、GitHub 專案的 README、投資簡報、作品集。講起品牌圖示，多數人先想到 Simple Icons，那套 3,400 多個 24×24 單色圖形幾乎是業界共通語言。但輪到你需要品牌原本的彩色標誌、甚至帶文字的完整 wordmark（把品牌名直接設計成標誌的那種字標）時，單色圖形幫不上忙，而這類素材偏偏最難取得：各品牌把商標資產散在新聞頁、媒體資源包、品牌規範頁等不同角落，格式不一，常見的是帶白底的 PNG 或設計軟體才開得動的原始檔，深色主題的版本往往根本沒有官方版本，最後都是工程師自己修圖。這也是為什麼品牌標誌下載的需求一直都在：它看起來是小事，認真做起來全是碎工。開源圖庫 Svgl 補的就是這個位置：有人先把這些標誌整理成統一的向量檔，深淺版本配好，直接取用。
Svgl 官網（svgl.app）打開就是一面彩色標誌牆：搜尋框輸入品牌名，就能下載 SVG 檔或複製 JSX 程式碼，全程免註冊免費用。實際清點它的目錄 API（時間基準 2026 年 11 月 14 日），收錄 679 筆、分成 41 個分類，軟體類 290 筆最大，函式庫 77 筆與 AI 類 74 筆在後；其中 157 筆附 wordmark 版本，166 筆的標誌本體提供深色與淺色兩種檔案，162 筆附官方品牌規範連結。整個專案在 GitHub 以 MIT 授權開源，由西班牙開發者 Pablo Hdez 於 2022 年 1 月發起，四年多下來累積約 6,400 顆星與 235 位貢獻者，2026 年 11 月中旬仍有程式碼推送，屬於活著的社群專案。
站上幾個小功能也對得上下游工作的胃口：搜尋框有鍵盤快捷鍵可以直接聚焦、每張卡片能把標誌加進收藏（存在瀏覽器本地，不用帳號，換裝置不會跟著走）、深淺主題一鍵切換，下載除了拿 SVG 檔也能選擇複製 JSX 程式碼，寫 React 的人貼上來就能用。
分類側欄本身就是一張開發者的技術棧地圖。把 41 個分類的收錄數攤開看，重心非常明顯：軟體類一枝獨秀，函式庫、AI、框架、開發工具、語言這幾個分類加起來又占一大塊，娛樂類 34 筆、音樂類只有 6 筆。換句話說，這座圖庫收得最全的，正好是開發者放技術棧時會點名的那批品牌；如果你的頁面要放的是主流科技服務，命中率高，若是新創或地區性品牌的長尾，就得碰運氣或自己貢獻。
與 Simple Icons 是分工，看你要哪一種辨識度
兩個圖庫常被放在一起比較，其實選擇題很簡單：你的畫面要的是一致風格，還是品牌本色。Simple Icons 把每個品牌化成同一套 24×24 單色圖形，以 CC0 釋出，適合排成一列的 icon 群或 favicon；Svgl 保留品牌原本的彩色標誌，還提供深色與淺色兩種版本及 wordmark，適合需要訪客一眼認出品牌的場合。收錄量差了一個數量級，但兩者光譜不同，互補的成分大於競爭。
給個具體判斷：頁尾放一排「我們使用了哪些技術」，要整齊劃一就回 Simple Icons；要訪客一眼認出 Stripe、Figma、Supabase 的原色標誌，就用 Svgl。兩邊都免費、都有人維護，同時用也不衝突，不少網站就是導覽列放單色 icon、頁尾放彩色標誌，各取所長。要留意的是彩色路線的隱藏成本：單色圖形混排不同品牌，視覺自動整齊；彩色標誌各有各的比例與構圖，排版時得自己對齊、統一留白，這段工夫省不掉。
| 比較軸 | Svgl | Simple Icons |
|---|---|---|
| 圖形形態 | 彩色完整標誌，157 筆附 wordmark，166 筆有深淺雙版本 | 單色 24×24 圖形 |
| 收錄量 | 679 筆，分 41 個分類 | 3,400 個以上 |
| 授權 | MIT（程式碼），圖形權利屬各品牌 | CC0 釋出 |
| 適合場景 | 官網技術棧、簡報、要品牌原色的地方 | 一致風格的 icon 列、favicon |
網址有固定規則，抓圖可以寫進腳本
對會寫程式的人，Svgl 最實用的部分不是下載按鈕，是可預測的檔案網址：svgl.app/library/品牌名.svg。實際抓 Claude Code 的標誌 claude-code.svg，回傳的是開頭帶 viewBox 與 title 標籤的乾淨 SVG，沒有多餘的編輯器中繼資料。深色主題有專屬檔名（例如 pi-dark.svg），wordmark 是獨立檔案；目錄資料裡深淺版本是明確的兩個欄位，寫程式挑版本就是讀欄位，不必猜檔名。版本抓對了，深色頁面就不會出現黑底配深色標誌、整塊看不見的慘案。
把同一個目標「拿 Claude Code 的標誌」走三條路，差異就很清楚：
- 網頁：搜尋框輸入 Claude Code，卡片上直接下載，順手可切換成複製 JSX。
- 網址：直接連到 library 資料夾下的 claude-code.svg，滑鼠不用動，腳本裡一行就能抓。
- API：先搜出該條目的檔案路徑再抓檔，適合「品牌名從別的資料來」的動態場景，例如讓使用者輸入技術棧清單、你的程式自動配圖。
- 編輯器內：Figma、Raycast、VSCode 都有社群做的擴充，搜尋下載不離開工作環境，懶得開瀏覽器時最順手。
檔案之所以小而乾淨，是收錄規則寫死的：貢獻指南要求每個 SVG 先用 SVGOMG 這類工具優化、單檔上限 21KB、優化時不得刪掉 viewBox。這些規則平常看不見，卻直接決定你抓回去的檔案能不能直接上線。實際隨機抽 40 個條目的主標誌檔量大小，中位數 1KB 出頭，全部壓在 20KB 以內，整座圖庫連同 wordmark 與深色版本、上千個檔案合計也只有約 3MB，比一張手機照片大不了多少。向量格式本身的紅利也在這裡：同一段 SVG 在導覽列是 16 像素、在簡報裡放大到整頁都不會失真，想臨時換成單色版本，向量檔也能直接改，這些是從品牌官網截圖 PNG 辦不到的。對設計師同樣成立：把標誌放進 Figma 或 Illustrator，向量檔縮放、改色、去背都自由，點陣圖只能重新描圖。
它的收錄機制也值得開發者知道：整座圖庫沒有另外的資料庫，SVG 檔就放在儲存庫的 library 資料夾，每個標誌在一份 TypeScript 資料檔裡登記標題、分類、檔案路徑與官方網址，API 的資料再從這份檔案產生。換句話說，資料庫就是 git 儲存庫本身，每個標誌什麼時候被收錄、被誰修正過，版本歷史查得到；想貢獻新標誌就是發 pull request，合併後跟著網站部署上線，流程與一般開源專案無異，對重視素材來源的人，這也代表每個檔案進庫的過程都有公開紀錄可稽核。專案本身的技術組成也攤在明面上：前端用 SvelteKit 與 Tailwind CSS，API 端是 Express 搭 Redis 快取，整個網站與 API 都在 MIT 授權範圍內，理論上你可以 fork 一份自架，只是搬走的程式碼不含品牌授權，這段留到下面談。
API 免金鑰，三個實測細節先記下來
Svgl 另有公開 API（api.svgl.app），免帳號免金鑰，文件列出全目錄、限筆數、分類、搜尋、分類清單幾種用法。目錄每筆資料帶的欄位很乾淨：標題、分類、檔案網址、官方網站，需要時再加 wordmark 與品牌規範連結；同一個標誌可以掛多個分類（目錄裡有 208 筆跨分類），所以按分類撈的時候同一個品牌可能在兩個籃子裡各出現一次，去重還是要自己做。實際打了幾輪，有三個細節值得先記住：
- 搜尋是精確匹配：搜 linux 只回 Linux 一筆，連同庫的 Ubuntu 都不會順便回來，想模糊找寧可拉全目錄自己濾。
- 分類名稱大小寫要照文件原樣：小寫的 ai 會回 Category not found，大寫的 AI 才會回 74 筆。
- 文件上「取得 SVG 程式碼」的端點要照範例帶上副檔名：/svg/adobe.svg 實測正常回傳 SVG 內容，少了 .svg 打成 /svg/adobe 才會回 SVG file not found，整合時照文件寫法走就不會踩坑。
文件的限制段也算誠實：API 有速率限制但沒公布數字，建議呼叫端快取幾分鐘再重打，實務上把全目錄快取一份在伺服器端、定時更新，對絕大多數應用都夠用；條款同時明文不要用這個 API 做出與 SVGL 相同的產品，定位是給擴充功能與工具串接。幾個端點的組合用法：全目錄可加限筆數參數先抽樣看資料欄位；分類清單端點會回每個分類的總數，整合前先打這一發，就知道你的技術棧落在哪些分類、涵蓋夠不夠，不必把 679 筆全拉下來數。圍繞它長出來的生態也確實都是工具：Figma 與 Framer 外掛、Raycast 與 VSCode 擴充、React、Vue、Svelte 套件、PowerShell 腳本，README 一口氣列了 13 個。
MIT 給的是程式碼，品牌授權是另一回事
這是最容易誤會的一段。授權檔寫的是 MIT License，著作權人 Pablo Hdez，2022 年；它涵蓋的是網站程式碼與收錄機制，而 679 個標誌圖形的著作權與商標權，仍然在各品牌手上。網站自己的說明也直白：每個 SVG 都附所屬產品連結，使用標誌前必須先取得許可，品牌要求下架時走 GitHub issue。從這套機制可以看出圖庫的自我定位：收錄是預設，品牌有意見時有明確的退出管道，而不是宣稱逐品牌取得過授權。README 的貢獻規則同樣要求提交者自行確認有權使用該圖形。
對照 Simple Icons 的做法，這條線會看得更清楚：Simple Icons 收的是從官方來源重新簡化成單色的圖形版本，整包以 CC0 釋出；Svgl 收的是品牌原本的彩色標誌，圖形權利留在品牌端，所以授權標示只能涵蓋程式碼這一層。下載免費與使用自由是兩件事，這個區別在標誌素材的世界裡比在一般軟體更關鍵。
實務上的分寸可以這樣拿：在自己作品列技術棧、標示「本站使用了哪些服務」，多屬常見的指示性使用，風險低；但把品牌標誌放進商用素材、當成自己產品的視覺元素、改色變形或大量再散布之前，先看條目附的官方品牌規範連結（162 筆有附）。這些連結指向的正是各品牌的正式管道，例如 NVIDIA 條目連到官網的標誌使用法律頁、Proton 條目連到官方媒體資源包，不少品牌對留白、比例、可用配色都有明文，照著走比憑感覺穩。圖庫替你省的是找圖的時間，省不了談授權的責任。
誰該加書籤，誰該繞過
適合把它加進書籤的人很明確：要放彩色品牌標誌的開發者與設計師、需要 wordmark 的簡報與官網製作者、想把抓圖寫進腳本或建置流程的人。相對地，要海量單色 icon 就回 Simple Icons；要 App Store 應用圖示可以看 Logo Hunter；要 macOS 應用圖示有 macOSicons；需要各類向量素材而不只是標誌，SVG Repo 的庫存更深。
收錄數字會隨社群提交持續變動，679 筆、6,400 顆星這組數字以 2026 年 11 月 14 日為準。兩種情況不建議依賴它：你本身就是品牌方或有正式授權需求的商業合作，請直接走官方媒體資源與法務流程，圖庫捷徑不該進合約鏈；以及需要保證素材永不變動的長期專案，收錄內容會隨下架請求調整，重要素材自己存一份才是穩的做法。想確認它涵蓋你的技術棧，最快的驗證方式是打開官網搜尋框，輸入技術棧裡最冷門的那個品牌名：找得到，下載與串接都很省事；找不到，右上方就有 Submit 按鈕，讀完貢獻規則補上一筆，下一個找它的人會感謝你。
