重點整理
SVG Doodles（svgdoodles.com）是免費的手繪風 SVG 素材網站，2026 年 10 月首頁標示收錄 217 款塗鴉，包含星星、箭頭、愛心、線條、立體條紋球等。新版介面是一整片可以拖曳瀏覽的畫布，點一下圖案，左上角就會出現預覽面板，按「COPY」即可複製 SVG 程式碼。網站目前沒有標示授權條款，用在商業專案前請先確認。
想替網頁、簡報或社群圖加一點手繪感的小裝飾，例如標題旁的星星、指向按鈕的箭頭，但又不會畫插圖？SVG Doodles 收集了兩百多款手繪塗鴉，全部是 SVG 向量格式，放大縮小都不會糊，也能改顏色。這篇會介紹 SVG Doodles 的新版操作方式，以及複製下來的 SVG 怎麼用在網站上。
SVG Doodles 是什麼？
SVG Doodles 是由 Lexington Themes 的設計師 Mike 製作的手繪 SVG 素材集，首頁標語是「217 hand-drawn SVG doodles to make your designs less boring」。相較於一般的扁平插圖，手繪塗鴉的素材網站比較少見，很適合用來點綴版面。每個圖案都有名稱與分類（例如 Shapes 分類的 Striped Sphere）。
上圖是 2024 年的舊版首頁。2026 年改版後，畫面改成深色背景，所有塗鴉散落在一整片畫布上，可以用滑鼠拖曳四處瀏覽。
SVG Doodles 使用教學
步驟一：開啟 SVG Doodles，拖曳瀏覽圖案
進入 svgdoodles.com，畫面下方提示「drag to explore · click a doodle」：按住滑鼠拖曳畫布，就能看到更多塗鴉；滑鼠移到圖案上會顯示名稱。
步驟二：點選圖案，按 COPY 複製 SVG
點一下喜歡的圖案，左上角會出現預覽面板，顯示圖案名稱、分類，以及格式選單（預設 SVG）和「COPY」按鈕。按 COPY，SVG 原始碼就複製到剪貼簿了。
步驟三：使用複製下來的 SVG 原始碼
複製到的是一段完整的 <svg> 程式碼，可以直接貼到網頁裡使用。
複製的 SVG 怎麼用？
- WordPress 網頁：在區塊編輯器加入「自訂 HTML」區塊，把 SVG 程式碼貼進去即可顯示。WordPress 預設不允許上傳 .svg 檔，用貼程式碼的方式最簡單。
- 改顏色：在程式碼裡找到
stroke或fill的色碼，換成品牌色。 - 存成檔案：把程式碼貼到純文字編輯器，存成 .svg 副檔名，就能匯入 Figma、Illustrator 或 PowerPoint（Microsoft 365 版本支援 SVG）。
常見問題
SVG Doodles 的素材可以商用嗎？
目前無法確定。網站上沒有標示授權條款，舊版介紹中常見的「可商用」說法也查不到官方出處，用在客戶網站或商品前，建議先聯絡作者確認。
SVG 素材有什麼好處？
SVG 是向量格式，放大縮小都不會失真，檔案通常很小，而且可以直接用程式碼改顏色，很適合網頁圖示與裝飾。
還有哪裡可以找到免費的手繪 SVG 素材？
fffuel 的 dddoodle 也提供手繪 SVG 塗鴉，但使用條件和各站不同，下載前一樣要先看清楚授權說明，例如是否需要標示出處。
結語
SVG Doodles 收錄 217 款手繪塗鴉，新版改成可以拖曳探索的畫布，點一下圖案、按 COPY 就能拿到 SVG 程式碼，貼進網頁或存成檔案都很方便。想替設計加一點手繪感時很好用，只是網站沒有寫明授權，商業用途請先確認再使用。