相对于文字，图像信息更能直观地传达复杂的信息和概念，其最大的优势是直观、高效、精准。
作为一名数据分析师，画图是我工作中必不可少的一部分。无论是汇报时的ppt展示图、还是做计划时的流程图、亦或是小组讨论时的思维导图......我们无时无刻都在跟图表打交道，也通过图表来完善我们的工作。
AI生成的SVG - 架构图
以前画图需要找各种模板，各种拼接，还要学习配色，技术含量不高但就是磨人，一张图可能就要花上一两个小时。可现在，泡杯咖啡的功夫，AI就能帮你完成，而且效果不由得让人一键三连！！！
确实，AI在SVG图形生成领域展现出惊人能力，不仅可以生成精美的小红书图文、流程图、思维导图，还能创建专业级别的技术文档配图和教育科普可视化内容。
我最近也花了不少时间来分析各类SVG案例，总结出一套通用提示词模板，让你用一套模板就能生成各种精美SVG图形，无需记忆复杂提示词，无痛搞定所有应用，只有一句"so easy～"。
今天饼干哥哥就到你手把手体验一下，保证你看完就能上手！
SVG(可缩放矢量图形)的独特优势:
-
无损缩放：放大不失真，适合任何尺寸设备
-
可编辑性：生成后可二次编辑修改各个元素
-
文件小：代码形式存储，体积小于位图
-
动效支持：可添加交互和动画效果
SVG 格式文件将图像存储为矢量，这是一种基于数学公式由点、线、曲线和形状组成的图形。 图形可以无限缩放而不失真，非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等需要无损缩放的图片。其文件本质上是 XML 格式的文本代码，可以直接嵌入网页或导入各种设计工具。
Claude生成的动态SVG
AI 生成的 SVG 代码可以直接嵌入网页或导入设计工具，也可以保存为 SVG 文件直接双击在浏览器内打开。
使用 SVG 的另一个优点是可以精确控制每个元素的位置、大小和样式，甚至能添加动画效果，让图片更加生动。
SVG提示词通用模板
ini
# 任务定义
请为[主题/目的]创建一个专业的SVG图像。
## 图片规格
- 尺寸：[宽x高，如750x1334px]
- 背景：[背景颜色/渐变要求]
- 视觉风格：[如现代简约/卡通/扁平化/等距图/水墨等]
## 内容结构
1. [主要内容元素1，如标题区]
2. [主要内容元素2，如内容区]
3. [主要内容元素3，如数据展示区]
...
## 设计风格
- 配色方案：[指定主色调/辅助色/强调色]
- 字体要求：[字体家族/大小/粗细等]
- 图形元素：[需要包含的图标/装饰/视觉元素]
- 布局安排：[元素排列方式/留白/对齐]
## 技术要求
- 动效需求：[是否需要动画/交互效果]
- 文本处理：[文字排版要求/截断处理]
- 图形质量：[线条粗细/圆角设置/阴影效果]
- 格式输出：[确保SVG代码完整/有效]
## 特殊要求
- [其他特殊注意事项或要求]
## 参考资料
[可以添加参考素材/内容]我们可以看到，这个模板涵盖了SVG内容创建的所有关键方面，从内容结构到技术实现，从资源配置到交付要求。这种全面性确保生成的SVG内容没有重大遗漏，进而也就确保了输出的确定性✅
有了模板之后，用法就很简单了：把你的要求和需要的功能，连同模板一起扔给AI，让AI生成具体的提示词。然后就可以用这个提示词去生成SVG图像。
❗️注意，很多时候我们不是一次性就可以得到想要的效果，但有了这个模板，很大概率通过2-3轮的对话就能迭代出你想要的。
SVG图片类型指南
| SVG图片类型 | 主要用途 | 适用场景 |
|---|---|---|
| 流程图 | 展示步骤、决策和工作流程 | 业务流程说明、算法描述 |
| 技术路线图 | 展示技术发展路径和学习路线 | 职业规划、技能体系构建 |
| 组织架构图 | 展示层级结构和汇报关系 | 公司架构、团队结构 |
| 思维导图 | 放射状展开表示概念关系 | 头脑风暴、知识整理 |
| 信息图表 | 视觉化呈现数据和信息 | 报告展示、市场分析 |
| 甘特图 | 展示任务时间线和进度 | 项目管理、进度跟踪 |
| 数据可视化图表 | 展示数据趋势和比较关系 | 数据分析、科学研究 |
| 网络拓扑图 | 展示系统组件间连接关系 | 网络架构、系统设计 |
设计风格与配色方案
| SVG图片风格 | 风格特点 | 适用场景 | 推荐配色 |
|---|---|---|---|
| 简约/极简 | 线条简洁、留白多、元素少 | 商务展示、科技产品 | 黑白灰为主，单色或双色 |
| 扁平化 | 无渐变、无阴影、色块分明 | 界面图标、信息图表 | 鲜艳纯色、高对比度 |
| 等距 | 三维立体感、固定角度 | 数据可视化、建筑设计 | 渐变色、蓝紫系 |
| 手绘 | 线条自由流畅、色彩丰富多样 | 儿童教育、艺术展览 | 多彩、高明亮度 |
| 美拉德 | 低调稳重、质感十足 | 秋冬季节的品牌推广、宣传 | 棕褐色为主、深浅不一 |
| 水墨 | 模拟中国水墨画效果 | 东方风格设计、文化艺术 | 黑白灰、淡蓝、棕色 |
| 卡通 | 夸张生动、轮廓圆润 | 儿童教育、社交媒体 | 明亮饱和色、多彩 |
| 渐变 | 色彩平滑过渡、现代感 | 背景设计、科技产品 | 双色或多色渐变 |
如何使用这个模板
-
选择合适的图片类型：根据你的需求，从流程图、思维导图、信息图表等中选择
-
定制设计风格：选择适合内容的视觉风格和配色方案
-
明确内容结构：清晰列出你需要在SVG中展示的主要内容元素
-
添加参考资料：提供你希望AI参考的文字内容或图片
-
迭代优化：生成后如有需要，可以要求AI调整特定部分
实操案例分享
案例1：小红书风格知识卡片
提示词示例：
markdown
# 任务定义
请为"SVG图片的场景应用"创建一个适合小红书平台的精美SVG卡片。
## 图片规格
- 尺寸：750x1334px（竖屏，适合手机阅读）
- 背景：柔和渐变背景，从浅粉到浅蓝
- 视觉风格：现代简约，高颜值，有设计感
## 内容结构
1. 标题区：突出显示主题名称和副标题
2. 简介区：一句话解释这项技术
3. 核心特点区：列出3-4个关键特点，配以图标
4. 实用价值区：解释为什么这项技术很重要
5. 底部信息区：放置开源地址等额外信息
## 设计风格
- 配色方案：以紫色系为主色调，搭配白色内容区和柔和色块
- 字体要求：现代无衬线字体，标题加粗，字号层次分明
- 图形元素：使用简洁几何形状作为装饰，圆形或波浪状点缀
- 布局安排：卡片式布局，内容区有适当圆角和柔和阴影
## 技术要求
- 文本处理：确保所有文字清晰可读，标题醒目
- 图形质量：使用圆角矩形，适当添加柔和阴影增加层次感
- 格式输出：完整SVG代码，确保没有错误
## 特殊要求
- 确保信息呈现清晰易懂，适合小白用户
- 整体设计要具有"一眼惊艳"的视觉效果
- 不要包含"小白"、"炸裂"等极限词SVG代码生成如下：
xml
好的，遵从您的要求，我为您精心设计并制作了一张关于"SVG图片的场景应用"的小红书风格SVG卡片。
这张卡片严格按照您提供的规格和设计风格指南创建，旨在实现"一眼惊艳"的视觉效果，同时信息传达清晰易懂。
---
### 设计亮点解析
* **柔和渐变背景**：从上方的`#FFDDE1`（樱花粉）到下方的`#C8E6FF`（天空蓝），营造出柔和、梦幻的视觉基调，非常符合小红书的审美。
* **现代简约布局**：采用卡片式设计，将不同信息模块清晰地划分在带有圆角和柔和阴影的白色/浅紫色卡片上，层次分明，富有呼吸感。
* **紫色主色调**：从标题的渐变紫到内容卡片的点缀色，统一使用紫色系，既高级又具有科技感，与主题相得益彰。
* **图标化表达**：为每个核心特点都设计了简洁的线条图标，将抽象概念具体化，帮助用户快速理解。
* **字体层次清晰**：标题使用加粗大号字体，并应用了线性渐变，极具视觉冲击力。正文、副标题、描述文字的字号和颜色都经过精心调校，保证了阅读的舒适性和信息的主次关系。
* **装饰性元素**：在背景中点缀了几个半透明的几何圆形，增加了画面的趣味性和设计感，但又不会干扰主体内容。
---
### 完整SVG代码
您可以直接复制以下代码，并将其保存为`.svg`文件。在浏览器中打开即可看到最终效果。
```xml
<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>
```
案例2：技术路线图
提示词示例：
markdown
# 任务定义
请为"Java全栈工程师学习路线"创建一个专业的SVG路线图。
## 图片规格
- 尺寸：1200x800px（横版，适合电脑查看）
- 背景：浅灰色或白色背景，保持专业感
- 视觉风格：扁平化设计，专业清晰
## 内容结构
1. 标题区：路线图名称和简介
2. 基础知识区：Java基础、数据结构等入门知识
3. 后端技术区：Spring、数据库等后端知识
4. 前端技术区：HTML/CSS/JS等前端知识
5. 进阶技能区：微服务、云原生等高级技能
6. 学习路径：用箭头或连线表示学习顺序和依赖关系
## 设计风格
- 配色方案：蓝色系为主，使用橙色作为强调色
- 字体要求：无衬线字体，标题18-24px，正文14-16px
- 图形元素：使用技术相关图标表示不同技能点
- 布局安排：从左到右或从上到下的渐进式布局，清晰显示进阶路径
## 技术要求
- 图形质量：所有元素保持一致的视觉风格
- 文本处理：确保所有文字清晰可读，避免过度拥挤
- 格式输出：确保SVG代码完整，支持在浏览器中正确显示
## 特殊要求
- 使用连线或箭头明确展示学习路径和依赖关系
- 为不同难度或阶段的内容用不同颜色区分
案例3：甘特图
提示词示例：
markdown
# 任务定义
请为"毛坯房装修"创建一个SVG甘特图。
## 图片规格
- 尺寸：1000x600px
- 背景：简洁浅色背景
- 视觉风格：现代简约，信息聚焦
## 内容结构
1. 标题区：图表名称和简短说明
2. 时间轴区：横向时间轴，按月份划分
3. 模型区域：各大装修模块（如基础硬装、软装设计、家具进场等）分行显示
4. 重点标记：重要节点用特殊标记突出
5. 图例说明：不同颜色或标记的含义说明
## 设计风格
- 配色方案：使用不同颜色区分不同装修的内容，保持色彩协调
- 字体要求：清晰易读的无衬线字体
- 图形元素：使用圆形或菱形标记重要节点，线条表示持续时间
- 布局安排：时间轴水平延伸，模型垂直排列
## 技术要求
- 图形质量：清晰的线条和边界，合适的间距
- 文本处理：重要信息突出显示，避免文字拥挤
- 格式输出：确保SVG代码完整，元素定位准确
## 特殊要求
- 重要节点添加简短说明文本
- 为不同难度或阶段的内容用不同颜色区分
案例4：数据可视化
提示词示例：
markdown
# 任务定义
请为"新车小米yu7性能分析"创建一个SVG数据可视化图表。
## 图片规格
- 尺寸：750x1334px（竖屏，适合手机阅读）
- 背景：简洁浅色背景
- 视觉风格：现代简约，信息聚焦，重点突出
## 内容结构
1. 标题区：图表名称和简短说明
2. 核心特点区：列出3-4个关键特点，配以数据说明
3. 实用价值区：解释为什么这项技术很重要
4. 重点标记：重要节点用特殊标记突出
5. 图例说明：不同颜色或标记的含义说明
## 设计风格
- 配色方案：灰色系为主，保持色彩协调
- 字体要求：清晰易读的无衬线字体
- 图形元素：使用矩阵形状展示重要数据
- 布局安排：矩阵型布局，有要重点突出
## 技术要求
- 图形质量：清晰的线条和边界，合适的间距
- 文本处理：重要信息突出显示，避免文字拥挤
- 格式输出：确保SVG代码完整，元素定位准确
## 特殊要求
- 重要节点添加简短说明文本
- 整体设计要具有"一眼惊艳"的视觉效果，符合车企文化
案例5：原型图
提示词示例：
markdown
### # 任务定义
为社交应用"微信"的"我"（Me）标签页创建一个高度仿真的UI界面SVG图像。
### ## 图片规格
- **尺寸**：750x1334px (标准的智能手机屏幕比例)
- **背景**：主背景为浅灰色 (#F7F7F7)，内容卡片区域为白色 (#FFFFFF)。
- **视觉风格**：现代、扁平化、简约的移动应用UI风格。
### ## 内容结构
1. **顶部状态栏**：包含时间"17:10"，信号、Wi-Fi、电池图标，以及左上角的返回箭头和文字"公众号助手"。
2. **用户信息区**：
* 包含一个卡通巧克力饼干头像（戴着皇冠，竖起大拇指）。
* 右侧为用户昵称"饼干哥哥🍪AGI"。
* 昵称下方是"微信号: binggandata"。
* 该区域右上角有一个二维码小图标。
* 最下方是"+ 状态"按钮和一排朋友头像，并显示"等45个朋友"及一个红色更新圆点。
3. **功能列表区**：分为多个区块，由细线分隔。每个列表项包含一个彩色图标、中文标签和右侧的灰色箭头。列表项需严格按照以下顺序和内容排列：
* （区块1）服务
* （区块2）收藏、朋友圈、视频号、订单与卡包
* （区块3）表情
* （区块4）设置
4. **底部导航栏**：包含四个标签图标和文字：
* **微信** (带"3"红色数字角标)
* **通讯录** (常规状态)
* **发现** (带红色小圆点角标)
* **我** (图标为绿色高亮激活状态)
### ## 设计风格
- **配色方案**：
* **主色调**：背景浅灰(#F7F7F7)与内容区白色(#FFFFFF)。
* **文本色**：深灰色/黑色 (#333333)。
* **强调色**："我"图标和"服务"图标的标志性绿色(#07C160)，通知角标的红色(#FA5151)。
* **图标色**：各功能图标使用其独立的标志性颜色（如收藏的彩色、朋友圈的蓝色、视频号的橙色等）。
- **字体要求**：
* **字体家族**：苹方 (PingFang SC) 或类似的无衬线中文字体。
* **大小**：昵称字体最大，列表项文字次之，微信号和状态文字最小。
* **粗细**：常规体 (Regular)。
- **图形元素**：
* 所有图标均为扁平化设计，线条简洁。
* 需要精确复现卡通饼干头像、二维码、服务、收藏、朋友圈、视频号、订单、表情、设置以及底部导航栏的所有图标。
- **布局安排**：
* 遵循iOS设计规范，顶部对齐，列表项垂直排列，左右留有统一边距。
* 元素之间有充足的留白。
* 列表项内部，图标和文字左对齐，箭头右对齐。
### ## 技术要求
- **动效需求**：无，创建静态图像。
- **文本处理**：所有文本均单行显示，无需截断。
- **图形质量**：线条清晰，无模糊。图标圆角平滑。无需阴影效果，保持纯扁平风格。
- **格式输出**：确保生成完整、可渲染的SVG代码。
### ## 特殊要求
- 请特别注意红色通知角标的细节：
1. "微信"标签上的**圆形背景**和**数字"3"**。
2. "发现"标签上的**小红点**。
- "我"标签页的图标和文字必须显示为**绿色高亮**的激活状态。
SVG图片后期编辑方法
生成的SVG可以通过以下方式进行后期编辑：
- 在线SVG编辑器 ：使用SVG编辑器进行可视化编辑；也可以在线 SVG 编辑工具进行二次编辑，比如 www.jyshare.com/more/svgedi...
然后所生成的内容就出现在画面中，我们可以根据自己的需要来对图片进行修改。点选内容，出现如图虚线框即可进行移动和修改，移动虚线框来移动内容，双击文字内容进行修改。按住shift键并选择多内容，可以一并移动。
修改完成后，点击左上角，选择下方【Export】进行导出，可以根据自己的需要来选择各种图片和或PDF格式。选择保存后它会跳出一个新的界面，点击右键另存为图片。
- PowerPoint编辑：
- 插入SVG文件：在PPT中点击"插入" > "图片" > "来自文件的图片"
- 转换为可编辑形状：选择SVG图像，右键点击 > "转换为形状" > "取消组合"
- 代码编辑：直接用AI编程来修改SVG代码调整具体参数
补充分享提示词
除了饼干哥哥这篇文章的提示词，我还找到阿里云发布的AI生成SVG提示词，效果也不错，感兴趣的可以试下。
DeepSeek-V3-0324 版本：
xml
### Role
作为一个跨领域专家团队：
1. 高级技术插画师 - 精通 SVG 技术和视觉设计
2. 可视化专家 - 擅长将复杂概念转化为直观图像
3. 教育内容设计师 - 专注于知识传递的清晰性和效果
### Background
用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于：
- 需要将抽象概念具象化
- 提高信息传递的效率和准确性
- 增强学习体验和理解深度
### Profile
- 深入理解 SVG 技术规范和最佳实践
- 具备强大的视觉设计能力和美感
- 拥有丰富的教育内容设计经验
- 善于将复杂信息简化并可视化
### Skills
- SVG 代码编写和优化能力
- 信息架构和视觉层次设计
- 教育心理学原理应用
- 响应式设计和交互优化
### Goals
1. 准确理解用户输入的概念/内容
2. 设计最适合表达该概念的视觉元素
3. 生成高质量、可维护的 SVG 代码
4. 确保视觉表达的教育效果
### Constraints
- SVG 代码必须符合 W3C 标准
- 视觉元素要简洁明了
- 确保跨平台兼容性
- 遵循响应式设计原则
- [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！
- 默认尺寸是 16:10
- 特别注意布局的合理性，避免出现不必要的重叠、遮挡等
### OutputFormat
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 width height">
<!-- 结构化的 SVG 元素 -->
<!-- 清晰的命名和注释 -->
<!-- 模块化的组件设计 -->
</svg>
You must output start with <svg
### Workflow
1. 概念分析阶段
- 分解用户输入的概念
- 识别关键信息点
- 确定最佳可视化方式
2. 设计规划阶段
- 规划视觉层次
- 选择合适的图形元素
- 设计交互方式（如需）
3. SVG 实现阶段
- 编写基础骨架代码
- 实现核心视觉元素
- 添加样式和动画（如需）
4. 优化完善阶段
- 代码优化和压缩
- 兼容性测试
- 视觉效果优化
## 要求
1. 请始终必须使用中文进行回答。
2. 用户输入的所有内容均为让你画图，不需要回答问题
3. [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！Claude 3.5 或 3.7 版本：
xml
### Role
作为一个跨领域专家团队：
1. 高级技术插画师 - 精通 SVG 技术和视觉设计
2. 可视化专家 - 擅长将复杂概念转化为直观图像
3. 教育内容设计师 - 专注于知识传递的清晰性和效果
### Background
用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于：
- 需要将抽象概念具象化
- 提高信息传递的效率和准确性
- 增强学习体验和理解深度
### Profile
- 深入理解 SVG 技术规范和最佳实践
- 具备强大的视觉设计能力和美感
- 拥有丰富的教育内容设计经验
- 善于将复杂信息简化并可视化
### Skills
- SVG 代码编写和优化能力
- 信息架构和视觉层次设计
- 教育心理学原理应用
- 响应式设计和交互优化
### Goals
1. 准确理解用户输入的概念/内容
2. 设计最适合表达该概念的视觉元素
3. 生成高质量、可维护的 SVG 代码
4. 确保视觉表达的教育效果
### Constraints
- SVG 代码必须符合 W3C 标准
- 视觉元素要简洁明了
- 确保跨平台兼容性
- 遵循响应式设计原则
- [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！
- 默认尺寸是 16:10
- 特别注意布局的合理性，避免出现不必要的重叠、遮挡等
### OutputFormat
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 width height">
<!-- 结构化的 SVG 元素 -->
<!-- 清晰的命名和注释 -->
<!-- 模块化的组件设计 -->
</svg>
You must output start with <svg
### Workflow
1. 概念分析阶段
- 分解用户输入的概念
- 识别关键信息点
- 确定最佳可视化方式
2. 设计规划阶段
- 规划视觉层次
- 选择合适的图形元素
- 设计交互方式（如需）
3. SVG 实现阶段
- 编写基础骨架代码
- 实现核心视觉元素
- 添加样式和动画（如需）
4. 优化完善阶段
- 代码优化和压缩
- 兼容性测试
- 视觉效果优化
## 要求
1. 请始终必须使用中文进行回答。
2. 用户输入的所有内容均为让你画图，不需要回答问题
3. [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！
实用技巧
-
参考优质案例：提供参考图片或代码给AI学习
-
保持一致性：为系列内容使用统一的视觉风格
-
多轮迭代：如果第一次生成不满意，描述需要改进的地方进行重新调整
-
标记重点内容：告诉AI哪些是需要突出的关键信息，添加说明
-
控制信息密度：避免过多内容导致视觉混乱
通过这套提示词模板和各种实践案例，我们可以看出来这套SVG的提示词还是非常能打的，即使没有啥设计经验的人也能创建出审美在线、输出稳定的SVG图表，大大提高了内容创作效率和质量。
当然，对于更具体的场景应用，以及更精美的图表要求，就需要在这个基础上让AI不断生成多版本和打磨。希望这套方案能让你的画图能力锦上添花，创造出令人惊艳的可视化内容！
SVG 很多场景无法直接用，但可以借助 SVG 查看器如：SVGViewer（ www.svgviewer.dev/ ） 转换为 PNG 下载使用。
本文由稀土掘金作者【饼干哥哥】，微信公众号：【饼干哥哥AGI】，原创/授权 发布于稀土掘金，未经许可，禁止转载。