SVG（可縮放矢量圖形）的獨特優勢#
- 無損縮放：放大不失真，適合任何尺寸設備
- 可編輯性：生成後可二次編輯修改各個元素
- 文件小：代碼形式存儲，體積小於位圖
- 動效支持：可添加互動和動畫效果
SVG 格式文件將圖像存儲為矢量，這是一種基於數學公式由點、線、曲線和形狀組成的圖形。圖形可以無限縮放而不失真，非常適合繪製 UI 素材、Logo 圖標、圖形插畫、技術架構圖、流程圖等需要無損縮放的圖片。其文件本質上是 XML 格式的文本代碼，可以直接嵌入網頁或導入各種設計工具。
SVG 提示詞通用模板#
任務定義#
請為 [主題 / 目的] 創建一個專業的 SVG 圖像。
圖片規格#
- 尺寸：[寬 x 高，如 750x1334px]
- 背景：[背景顏色 / 漸變要求]
- 視覺風格：[如現代簡約 / 卡通 / 扁平化 / 等距圖 / 水墨等]
內容結構#
- [主要內容元素 1，如標題區]
- [主要內容元素 2，如內容區]
- [主要內容元素 3，如數據展示區]
...
設計風格#
- 配色方案：[指定主色調 / 輔助色 / 強調色]
- 字體要求：[字體家族 / 大小 / 粗細等]
- 圖形元素：[需要包含的圖標 / 裝飾 / 視覺元素]
- 佈局安排：[元素排列方式 / 留白 / 對齊]
技術要求#
- 動效需求：[是否需要動畫 / 互動效果]
- 文本處理：[文字排版要求 / 截斷處理]
- 圖形質量：[線條粗細 / 圓角設置 / 陰影效果]
- 格式輸出：[確保 SVG 代碼完整 / 有效]
特殊要求#
- [其他特殊注意事項或要求]
參考資料#
[可以添加參考素材 / 內容]
我們可以看到，這個模板涵蓋了 SVG 內容創建的所有關鍵方面，從內容結構到技術實現，從資源配置到交付要求。這種全面性確保生成的 SVG 內容沒有重大遺漏，進而也就確保了輸出的確定性✅
有了模板之後，用法就很簡單了：把你的要求和需要的功能，連同模板一起扔給 AI，讓 AI 生成具體的提示詞。然後就可以用這個提示詞去生成 SVG 圖像。
SVG 圖片類型指南#
SVG 圖片類型主要用途適用場景#
- 流程圖：展示步驟、決策和工作流程（業務流程說明、算法描述）
- 技術路線圖：展示技術發展路徑和學習路線（職業規劃、技能體系構建）
- 組織架構圖：展示層級結構和匯報關係（公司架構、團隊結構）
- 思維導圖：放射狀展開表示概念關係（頭腦風暴、知識整理）
- 信息圖表：視覺化呈現數據和信息（報告展示、市場分析）
- 甘特圖：展示任務時間線和進度（項目管理、進度跟蹤）
- 數據可視化圖表：展示數據趨勢和比較關係（數據分析、科學研究）
- 網絡拓撲圖：展示系統組件間連接關係（網絡架構、系統設計）
設計風格與配色方案#
| SVG 圖片風格 | 風格特點 | 適用場景推薦 | 配色 |
|---|---|---|---|
| 簡約 / 極簡 | 線條簡潔、留白多、元素少 | 商務展示、科技產品 | 黑白灰為主，單色或双色 |
| 扁平化 | 無漸變、無陰影、色塊分明 | 界面圖標、信息圖表 | 鮮豔純色、高對比度 |
| 等距 | 三維立體感、固定角度 | 數據可視化、建築設計 | 漸變色、藍紫系 |
| 手繪 | 線條自由流暢、色彩豐富多樣 | 兒童教育、藝術展覽 | 多彩、高明亮度 |
| 美拉德 | 低調穩重、質感十足 | 秋冬季節的品牌推廣、宣傳 | 棕褐色為主、深淺不一 |
| 水墨 | 模擬中國水墨畫效果 | 東方風格設計、文化藝術 | 黑白灰、淡藍、棕色 |
| 卡通 | 誇張生動、輪廓圓潤 | 兒童教育、社交媒體 | 明亮飽和色、多彩漸變 |
如何使用這個模板#
- 選擇合適的圖片類型：根據你的需求，從流程圖、思維導圖、信息圖表等中選擇
- 定制設計風格：選擇適合內容的視覺風格和配色方案
- 明確內容結構：清晰列出你需要在 SVG 中展示的主要內容元素
- 添加參考資料：提供你希望 AI 參考的文字內容或圖片
- 迭代優化：生成後如有需要，可以要求 AI 調整特定部分
實操案例#
案例：小紅書風格知識卡片提示詞示例#
任務定義#
請為 "SVG 圖片的場景應用" 創建一個適合小紅書平台的精美 SVG 卡片。
圖片規格#
- 尺寸：750x1334px（豎屏，適合手機閱讀）
- 背景：柔和漸變背景，從淺粉到淺藍
- 視覺風格：現代簡約，高顏值，有設計感
內容結構#
- 標題區：突出顯示主題名稱和副標題
- 簡介區：一句話解釋這項技術
- 核心特點區：列出 3-4 個關鍵特點，配以圖標
- 實用價值區：解釋為什麼這項技術很重要
- 底部信息區：放置開源地址等額外信息
設計風格#
- 配色方案：以紫色系為主色調，搭配白色內容區和柔和色塊
- 字體要求：現代無襯線字體，標題加粗，字號層次分明
- 圖形元素：使用簡潔幾何形狀作為裝飾，圓形或波浪狀點綴
- 佈局安排：卡片式佈局，內容區有適當圓角和柔和陰影
技術要求#
- 文本處理：確保所有文字清晰可讀，標題醒目
- 圖形質量：使用圓角矩形，適當添加柔和陰影增加層次感
- 格式輸出：完整 SVG 代碼，確保沒有錯誤
特殊要求#
- 確保信息呈現清晰易懂，適合小白用戶
- 整體設計要具有 "一眼驚艷" 的視覺效果
- 不要包含 "小白"、"炸裂" 等極限詞
完整 SVG 代碼#
您可以直接複製以下代碼，並將其保存為.svg文件。在瀏覽器中打開即可看到最終效果。
<svg width="750" height="1334" viewBox="0 0 750 1334" xmlns="http://www.w3.org/2000/svg" style="font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;">
<!-- === 定義區：漸變、濾鏡等可重用元素 === -->
<defs>
<!-- 背景漸變：從粉到藍 -->
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFDDE1; stop-opacity:1" />
<stop offset="100%" style="stop-color:#C8E6FF; stop-opacity:1" />
</linearGradient>
<!-- 標題文字漸變：從深紫到亮紫 -->
<linearGradient id="title-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6A11CB;" />
<stop offset="100%" style="stop-color:#2575FC;" />
</linearGradient>
<!-- 柔和陰影濾鏡 -->
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#4A148C" flood-opacity="0.1" />
</filter>
</defs>
<!-- === 背景層 === -->
<rect width="750" height="1334" fill="url(#bg-gradient)" />
<!-- 裝飾性圖形 -->
<circle cx="100" cy="200" r="80" fill="#ffffff" opacity="0.15" />
<circle cx="700" cy="550" r="120" fill="#A48BFF" opacity="0.1" />
<circle cx="150" cy="1100" r="100" fill="#ffffff" opacity="0.2" />
<!-- === 內容層 === -->
<g id="content-group">
<!-- 1. 標題區 -->
<g id="title-area" text-anchor="middle">
<text x="375" y="160" font-size="64" font-weight="bold" fill="url(#title-gradient)">SVG 圖片的場景應用</text>
<text x="375" y="215" font-size="24" fill="#555768">矢量圖形的魔法世界</text>
</g>
<!-- 2. 簡介區 -->
<g id="intro-area">
<rect x="50" y="270" width="650" height="90" rx="20" fill="#F8F4FF" filter="url(#soft-shadow)" />
<text x="375" y="325" text-anchor="middle" font-size="22" fill="#6A5ACD">
一種不失真的圖像格式，讓你的設計更靈活
</text>
</g>
<!-- 3. 核心特點區 -->
<g id="features-area">
<!-- 特點1: 無限縮放 -->
<g>
<rect x="50" y="400" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
<!-- Icon: 縮放 -->
<g transform="translate(90, 445)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M 0 20 L 20 0 M 12 0 L 20 0 L 20 8" />
<path d="M 40 40 L 60 60 M 40 52 L 40 60 L 48 60" />
<circle cx="30" cy="30" r="12" />
</g>
<text x="180" y="465" font-size="26" font-weight="600" fill="#333">無限縮放</text>
<text x="180" y="505" font-size="20" fill="#777">任意放大不模糊，保持高清銳利</text>
</g>
<!-- 特點2: 輕量高效 -->
<g>
<rect x="50" y="580" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
<!-- Icon: 羽毛 -->
<g transform="translate(90, 625)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M30,0 Q60,30 30,60 Q0,30 30,0 Z" fill="#E6E6FA" />
<path d="M30,0 Q60,30 30,60" />
<path d="M20,15 L40,35" />
<path d="M20,30 L40,50" />
</g>
<text x="180" y="645" font-size="26" font-weight="600" fill="#333">輕量高效</text>
<text x="180" y="685" font-size="20" fill="#777">文件體積小，加載速度快，利於SEO</text>
</g>
<!-- 特點3: 動態交互 -->
<g>
<rect x="50" y="760" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
<!-- Icon: 魔術棒 -->
<g transform="translate(95, 805)" stroke="#8A2BE2" stroke-width="3" fill="#E6E6FA" stroke-linecap="round" stroke-linejoin="round">
<path d="M0,0 L30,30 M10,35 L5,40 M40,10 L35,5" />
<polygon points="30,30 45,15 60,30 45,45" />
</g>
<text x="180" y="825" font-size="26" font-weight="600" fill="#333">動態交互</text>
<text x="180" y="865" font-size="20" fill="#777">可通過代碼控制，實現酷炫動畫效果</text>
</g>
</g>
<!-- 4. 實用價值區 -->
<g id="value-area">
<rect x="50" y="950" width="650" height="190" rx="20" fill="#EDE7F6" filter="url(#soft-shadow)" />
<text x="375" y="1000" text-anchor="middle" font-size="28" font-weight="bold" fill="#4A148C">為什麼它如此重要？</text>
<text x="80" y="1055" font-size="21" fill="#4A235A" line-height="1.6">
<tspan x="80" dy="0">從動態Logo、數據可視化圖表到個性化圖標，</tspan>
<tspan x="80" dy="1.4em">SVG正在重塑現代Web設計，</tspan>
<tspan x="80" dy="1.4em">全方位提升用戶體驗。</tspan>
</text>
</g>
<!-- 5. 底部信息區 -->
<g id="footer-area" text-anchor="middle" fill="#6c757d">
<!-- GitHub Icon -->
<path fill="#6c757d" d="M346.5,1236.5c-3.3,0-6,2.7-6,6v15c0,3.3,2.7,6,6,6s6-2.7,6-6v-15C352.5,1239.2,349.8,1236.5,346.5,1236.5z M375,1225c-12.4,0-22.5,10.1-22.5,22.5c0,9.9,6.4,18.3,15.2,21.3c1.1,0.2,1.5-0.5,1.5-1.1c0-0.5,0-2,0-3.9c-6.2,1.3-7.5-3-7.5-3c-1-2.6-2.5-3.3-2.5-3.3c-2-1.4,0.2-1.3,0.2-1.3c2.2,0.2,3.4,2.3,3.4,2.3c2,3.4,5.2,2.4,6.4,1.8c0.2-1.4,0.8-2.4,1.4-3c-4.9-0.6-10.1-2.5-10.1-11c0-2.4,0.9-4.4,2.3-6c-0.2-0.6-1-2.8,0.2-5.9c0,0,1.9-0.6,6.1,2.3c1.8-0.5,3.7-0.7,5.6-0.7c1.9,0,3.8,0.2,5.6,0.7c4.2-2.9,6.1-2.3,6.1-2.3c1.2,3.1,0.4,5.4,0.2,5.9c1.4,1.6,2.3,3.5,2.3,6c0,8.5-5.2,10.4-10.1,11c0.8,0.7,1.5,2.1,1.5,4.2c0,3,0,5.5,0,6.2c0,0.6,0.4,1.3,1.5,1.1c8.8-3,15.2-11.4,15.2-21.3C397.5,1235.1,387.4,1225,375,1225z"/>
<text x="375" y="1285" font-size="18">
<tspan>了解更多 & 探索開源項目</tspan>
</text>
</g>
</g>
</svg>
SVG 圖片後期編輯方法#
生成的 SVG 可以通過以下方式進行後期編輯：
-
在線 SVG 編輯器
使用 SVG 編輯器 https://unpkg.com/[email protected]/dist/editor/index.html 進行可視化編輯；也可以在線 SVG 編輯工具進行二次編輯，比如 https://www.jyshare.com/more/svgeditor/。
然後所生成的內容就出現在畫面中，我們可以根據自己的需要來對圖片進行修改。點選內容，出現如圖虛線框即可進行移動和修改，移動虛線框來移動內容，雙擊文字內容進行修改。按住 shift 鍵並選擇多內容，可以一並移動。修改完成後，點擊左上角，選擇下方【Export】進行導出，可以根據自己的需要來選擇各種圖片和或 PDF 格式。選擇保存後它會跳出一個新的界面，點擊右鍵另存為圖片。 -
PowerPoint 編輯：插入 SVG 文件：在 PPT 中點擊 "插入" > "圖片" > "來自文件的圖片" 轉換為可編輯形狀：選擇 SVG 圖像，右鍵點擊 > "轉換為形狀" > "取消組合"。
-
代碼編輯：直接用 AI 編程來修改 SVG 代碼調整具體參數。
補充分享#
通過這套提示詞模板和各種實踐案例，我們可以看出這套 SVG 的提示詞還是非常能打的，即使沒有啥設計經驗的人也能創建出審美在線、輸出穩定的 SVG 圖表，大大提高了內容創作效率和質量。
當然，對於更具體的場景應用，以及更精美的圖表要求，就需要在這個基礎上讓 AI 不斷生成多版本和打磨。希望這套方案能讓你的畫圖能力錦上添花，創造出令人驚艷的可視化內容！
SVG 很多場景無法直接用，但可以借助 SVG 查看器如：SVGViewer（https://www.svgviewer.dev/） 轉換為 PNG 下載使用。