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 下载使用。