Vibe Coding 玩家必備的 SVG 進階操作指南

真正的 Vibe Coding 不僅僅是功能跑得通，視覺上的「精緻感」更是關鍵，相比於傳統圖片，輕量化又可以無限放大不失真的 SVG 圖片，是許多網頁都會使用的圖片格式，這篇教學會介紹如何整合 Icomoon 雲端動劇、引入外部 SVG，甚至嘗試自行繪製專屬圖示，只要掌握這些技巧，就能與 AI 聯手，創藥更具專業美感的數位作品。

快速導覽：

• 什麼是 SVG？
• 使用外部 SVG 圖檔
• 直接提供 SVG 程式碼
• 使用 Icomoon 產生 SVG 圖示

什麼是 SVG？

SVG ( Scalable Vector Graphics ) 為一種「可縮放向量圖形」，本質上是一種基於 XML 格式的純文字檔案，簡單來說，SVG 不是由成千上萬個彩色方格 ( 像素 ) 組成的，而是由一連串的「繪圖指令」組成，因為 SVG 是「寫」出來的，所以可以直接用記事本打開它、閱讀它，甚至直接修改它。

在 Vibe Coding 的視角下，SVG 不再只是一張圖片，而是一個可以被 AI 控制和理解的 HTML 元件，透過程式就能輕鬆讓 SVG 產生互動效果或修改顏色和形狀，只要掌握了 SVG，就能真正實現「用說的，就能精準控制視覺細節」的高效開發境界。

SVG 和 PNG、JPG 或 WebP 等格式的差異如下表：

使用外部 SVG 圖檔

SVG 除了使用程式碼表現，也可以將 SVG 的程式碼儲存為副檔名「.svg」的檔案，接著就能參考「Vibe Coding 圖片處理心法」教學步驟，將這張圖檔放到圖片空間取得「專屬網址」，接著就能讓 AI 讀取網址並放到網頁裡。

下方提示詞會讓 AI 用網頁標籤或 CSS 樣式屬性的方式讀取外部圖檔，在網頁上呈現這兩個圖案。

請產生一個簡單的網頁，呈現這兩張圖片和名稱，圖片高度都設為 200px：
- 第一張圖片名稱：「小火焰」，網址：https://oxxostudio-demo.github.io/share-image/fire.svg
- 第二張圖片名稱：「小水滴」，網址：https://oxxostudio-demo.github.io/share-image/water.svg

完成後可以觀察原始碼，AI 會使用 img 標籤讀取外部 SVG 檔案。

直接提供 SVG 程式碼

如果「不希望圖檔放在外部空間，又希望 AI 可以使用 SVG」，也可以直接提供 AI 「SVG 原始碼」，AI 就可以將直接原始碼放入網頁中，查看 SVG 程式碼的方式很簡單，使用「筆記本」、「純文字編輯器」或「瀏覽器 ( 需要額外檢視原始碼 )」打開 SVG 圖示，就可以看見 SVG 程式碼。

如果讓 AI 「先讀取外部 SVG 程式碼，然後再將程式碼放入網頁中」，會發生奇怪的錯誤，因為 AI 會自行修改內容，然後 SVG 的形狀和長相就壞掉了。

下方提示詞會讓 AI 分別使用兩組 SVG 程式碼，在網頁上呈現這兩個圖案。

請產生一個簡單的網頁，呈現這兩張圖片和名稱，圖片高度都設為 200px：

- 第一張圖片名稱：「小火焰」，SVG 程式碼：
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92.27 122.88" style="enable-background:new 0 0 92.27 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#EC6F59;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD15C;}</style><g><path class="st0" d="M18.61,54.89C15.7,28.8,30.94,10.45,59.52,0C42.02,22.71,74.44,47.31,76.23,70.89 c4.19-7.15,6.57-16.69,7.04-29.45c21.43,33.62,3.66,88.57-43.5,80.67c-4.33-0.72-8.5-2.09-12.3-4.13C10.27,108.8,0,88.79,0,69.68 C0,57.5,5.21,46.63,11.95,37.99C12.85,46.45,14.77,52.76,18.61,54.89L18.61,54.89z"/><path class="st1" d="M33.87,92.58c-4.86-12.55-4.19-32.82,9.42-39.93c0.1,23.3,23.05,26.27,18.8,51.14 c3.92-4.44,5.9-11.54,6.25-17.15c6.22,14.24,1.34,25.63-7.53,31.43c-26.97,17.64-50.19-18.12-34.75-37.72 C26.53,84.73,31.89,91.49,33.87,92.58L33.87,92.58z"/></g></svg>

- 第二張圖片名稱：「小水滴」，SVG 程式碼：
<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">  <g fill="none" fill-rule="evenodd">    <path fill="#B4DFFB" d="M26.6995662,63 C36.4747667,63 44.3991324,55.0756343 44.3991324,45.3004338 C44.3991324,35.5252333 26.6995662,9 26.6995662,9 C26.6995662,9 9,35.5252333 9,45.3004338 C9,55.0756343 16.9243657,63 26.6995662,63 Z"/>    <path fill="#4796E7" d="M41.1107898,41 C48.351679,41 54.2215796,35.1300995 54.2215796,27.8892102 C54.2215796,20.648321 41.1107898,1 41.1107898,1 C41.1107898,1 28,20.648321 28,27.8892102 C28,35.1300995 33.8699005,41 41.1107898,41 Z"/>    <path stroke="#B4DFFB" stroke-linecap="round" stroke-width="2" d="M32,28 C32,32.9705627 36.0294373,37 41,37 L41,37"/>    <path stroke="#FFF" stroke-linecap="round" stroke-width="2" d="M13,46 C13,52.627417 18.372583,58 25,58 L25,58"/>  </g></svg>

完成後可以觀察原始碼，AI 會使用 svg 標籤擺放程式碼。

使用 Icomoon 產生 SVG 圖示

在 Vibe Coding 的時候，如果不想要自己畫，但又需要使用「圖示」，往往會透過「使用 emoji」或「用 SVG 畫出...」的提示詞，讓 AI 產生對應的圖示，但這類型的圖示往往都不太符合需求，甚至還會出現畫出奇怪形狀的狀況，因此如果直接提供 AI「圖示的 SVG 程式碼」，就可以讓 AI 產生精準的圖示。

圖示 SVG 程式碼不容易閱讀，就算是資深網頁設計師也不可能直接寫 SVG 程式碼，所以通常會借助一些工具輔助。

Icomoon 是一個非常老牌且有名的線上 Icon 圖示服務，提供上萬種常見的圖示，不僅不用註冊就可以使用，還可以把圖示下載為 SVG 或「圖示字體 Icon Font」，如果會設計圖示，也可以上傳自己的圖示，透過 Icomoon 轉換成圖示字體，開啟網頁後，會看到預設的許多 Icon 圖示，點擊上方書本「library」圖示開啟其他的圖示包清單。

前往 IcoMoon APP：https://icomoon.io/app/

開啟圖示包清單之後，點擊「+Add」按鈕就能將該圖示包加入工具畫面，點擊「-Remove」就能移除該圖示包。

選擇自己想要的圖示之後，點擊左下角「Generate SVG & More」，就可以將圖示變成 SVG 程式碼。

進入下載頁面後，點擊「download」，就可以將這些圖示的 SVG 和 PNG 檔案下載到電腦中。

下載並解壓縮檔案，進入「SVG」資料夾，就可以看見剛剛的 Icon 圖示。

使用「筆記本」、「純文字編輯器」或「瀏覽器 ( 需要額外檢視原始碼 )」打開 SVG 圖示，就可以看見 SVG 程式碼。

這時候只要提供 AI 這些 SVG 程式碼，AI 就會套用這個 SVG 作為圖示 ( 也可以把 SVG 放到外部空間，用上述第一種讀取外部網址的方式放入網頁 )，下方提供簡單的提示詞範例：

幫我在畫面上放置五個可愛的按鈕，圖示使用下列的 SVG 圖示，按鈕高度都相同，圖示高度都相同。
- 圖示：「攝影機」，SVG 程式碼：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M12 9c0-2.761 2.239-5 5-5s5 2.239 5 5c0 2.761-2.239 5-5 5s-5-2.239-5-5zM0 9c0-2.761 2.239-5 5-5s5 2.239 5 5c0 2.761-2.239 5-5 5s-5-2.239-5-5zM24 19v-3c0-1.1-0.9-2-2-2h-20c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h20c1.1 0 2-0.9 2-2v-3l8 5v-14l-8 5zM20 24h-16v-6h16v6z"></path>
</svg>
- 圖示：「吃豆人」，SVG 程式碼：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
- 圖示：「喝咖啡」，SVG 程式碼：
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 15v-6c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121-0.335 1.577-0.879 2.121-1.292 0.879-2.121 0.879zM2 7c-0.552 0-1 0.448-1 1v9c0 1.38 0.561 2.632 1.464 3.536s2.156 1.464 3.536 1.464h8c1.38 0 2.632-0.561 3.536-1.464s1.464-2.156 1.464-3.536c1.38 0 2.632-0.561 3.536-1.464s1.464-2.156 1.464-3.536-0.561-2.632-1.464-3.536-2.156-1.464-3.536-1.464h-1zM3 9h14v8c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879h-8c-0.829 0-1.577-0.335-2.121-0.879s-0.879-1.292-0.879-2.121zM5 1v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1zM9 1v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 1v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
</svg>
- 圖示：「小盒子」，SVG 程式碼：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M14.441 4.245l-2.441 1.41-2.441-1.41 1.936-1.106c0.112-0.064 0.232-0.105 0.355-0.124 0.218-0.034 0.445 0.003 0.654 0.124zM4 13.733l2.5 1.444v2.83l-1.995-1.14c-0.111-0.065-0.207-0.148-0.285-0.245-0.139-0.172-0.22-0.386-0.22-0.622zM17.5 18.007v-2.83l2.5-1.444v2.267c-0.001 0.121-0.025 0.246-0.070 0.362-0.080 0.206-0.225 0.384-0.426 0.5zM18.961 6.828l-6.961 4.027-6.961-4.027 2.51-1.435 3.951 2.283c0.319 0.184 0.697 0.173 1.001 0l3.95-2.282zM11.526 22.961c0.141 0.076 0.303 0.119 0.474 0.119 0.173 0 0.336-0.044 0.478-0.121 0.356-0.058 0.701-0.18 1.017-0.36l3.198-1.828c0.218-0.043 0.411-0.157 0.554-0.316l3.249-1.857c0.618-0.357 1.060-0.897 1.299-1.514 0.133-0.342 0.202-0.707 0.205-1.084v-8c0-0.478-0.113-0.931-0.314-1.334-0.022-0.071-0.052-0.14-0.091-0.207-0.046-0.079-0.1-0.149-0.162-0.21-0.031-0.043-0.064-0.086-0.097-0.127-0.23-0.286-0.512-0.528-0.831-0.715l-3.258-1.861c-0.147-0.167-0.343-0.276-0.553-0.317l-3.197-1.827c-0.61-0.352-1.3-0.465-1.954-0.364-0.363 0.057-0.715 0.179-1.037 0.363l-3.2 1.828c-0.21 0.041-0.406 0.15-0.553 0.316l-3.249 1.857c-0.383 0.221-0.699 0.513-0.941 0.85-0.060 0.060-0.114 0.13-0.159 0.207-0.039 0.068-0.070 0.138-0.092 0.21-0.040 0.080-0.076 0.163-0.108 0.246-0.132 0.343-0.201 0.708-0.204 1.078v8.007c0.001 0.71 0.248 1.363 0.664 1.878 0.23 0.286 0.512 0.528 0.831 0.715l3.258 1.862c0.142 0.16 0.335 0.274 0.554 0.316l3.197 1.827c0.324 0.187 0.67 0.307 1.022 0.362zM11 12.587v7.991l-2.5-1.428v-4.55c0-0.368-0.199-0.69-0.5-0.866l-4-2.311v-2.885zM13 20.578v-7.991l7-4.049v2.885l-4 2.311c-0.319 0.184-0.498 0.517-0.5 0.866v4.55z"></path>
</svg>
- 圖示：「下雨天」，SVG 程式碼：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15 13v8c0 0.552 0.448 1 1 1s1-0.448 1-1v-8c0-0.552-0.448-1-1-1s-1 0.448-1 1zM7 13v8c0 0.552 0.448 1 1 1s1-0.448 1-1v-8c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 15v8c0 0.552 0.448 1 1 1s1-0.448 1-1v-8c0-0.552-0.448-1-1-1s-1 0.448-1 1zM20.401 17.496c1.517-0.665 2.623-1.883 3.181-3.312s0.572-3.074-0.092-4.591c-0.574-1.311-1.563-2.316-2.752-2.925-0.836-0.428-1.771-0.66-2.73-0.668h-0.528c-0.725-2.057-2.143-3.708-3.915-4.753-1.983-1.169-4.415-1.582-6.821-0.961s-4.334 2.161-5.503 4.144-1.582 4.415-0.961 6.821c0.509 1.97 1.634 3.623 3.099 4.783 0.433 0.343 1.062 0.27 1.405-0.163s0.27-1.062-0.163-1.405c-1.132-0.897-2.008-2.179-2.405-3.716-0.483-1.871-0.163-3.76 0.748-5.305s2.408-2.739 4.28-3.223 3.761-0.163 5.305 0.748 2.739 2.408 3.223 4.28c0.115 0.435 0.505 0.75 0.968 0.75h1.252c0.647 0.005 1.275 0.162 1.834 0.448 0.793 0.406 1.448 1.073 1.832 1.947 0.443 1.012 0.435 2.106 0.062 3.061s-1.109 1.765-2.121 2.208c-0.506 0.222-0.736 0.811-0.515 1.317s0.811 0.736 1.317 0.515z"></path>
</svg>

小結

SVG 不只是圖形，它更是 Vibe Coding 中最靈活的視覺元件！透過 Icomoon 的系統化整理、外部 SVG 的精準引用，甚至是自行繪製的獨特設計，就可以賦予了 AI 生成代碼所欠缺的「靈魂與個性」，掌握了 SVG 的操作，就等於掌握了介面質感的鑰匙！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～