Vibe Coding 使用 SVG 图示

真正的 Vibe Coding 不仅仅是功能跑得通，视觉上的“精致感”更是关键，相比于传统图片，轻量化又可以无限放大不失真的 SVG 图片，是许多网页都会使用的图片格式，这篇教学会介绍如何整合 Icomoon 云端动剧、引入外部 SVG，甚至尝试自行绘制专属图示，只要掌握这些技巧，就能与 AI 联手，创药更具专业美感的数字作品。

• 更多参考：Vibe Coding 全方位开发导读
• 延伸阅读：Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置

快速导览：

• 什么是 SVG？
• 使用外部 SVG 图档
• 直接提供 SVG 程序码
• 使用 Icomoon 产生 SVG 图示

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

什么是 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 的操作，就等于掌握了界面质感的钥匙！

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈