# 热门搜索 #
大模型
人工智能
openai
融资
chatGPT
相对于文字，图像信息更能直观地传达复杂的信息和概念，其最大的优势是直观、高效、精准。
作为一名数据分析师，画图是我工作中必不可少的一部分。无论是汇报时的ppt展示图、还是做计划时的流程图、亦或是小组讨论时的思维导图……我们无时无刻都在跟图表打交道，也通过图表来完善我们的工作。
以前画图需要找各种模板，各种拼接，还要学习配色，技术含量不高但就是磨人，一张图可能就要花上一两个小时。可现在，泡杯咖啡的功夫，AI就能帮你完成，而且效果不由得让人一键三连！！！
确实，AI在SVG图形生成领域展现出惊人能力，不仅可以生成精美的小红书图文、流程图、思维导图，还能创建专业级别的技术文档配图和教育科普可视化内容。
我最近也花了不少时间来分析各类SVG案例，总结出一套通用提示词模板，让你用一套模板就能生成各种精美SVG图形，无需记忆复杂提示词，无痛搞定所有应用，只有一句“so easy～”。
今天饼干哥哥就到你手把手体验一下，保证你看完就能上手！
- 无损缩放：放大不失真，适合任何尺寸设备
- 可编辑性：生成后可二次编辑修改各个元素
- 文件小：代码形式存储，体积小于位图
- 动效支持：可添加交互和动画效果
SVG 格式文件将图像存储为矢量，这是一种基于数学公式由点、线、曲线和形状组成的图形。 图形可以无限缩放而不失真，非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等需要无损缩放的图片。其文件本质上是 XML 格式的文本代码，可以直接嵌入网页或导入各种设计工具。
Claude生成的动态SVG
AI 生成的 SVG 代码可以直接嵌入网页或导入设计工具，也可以保存为 SVG 文件直接双击在浏览器内打开。
使用 SVG 的另一个优点是可以精确控制每个元素的位置、大小和样式，甚至能添加动画效果，让图片更加生动。
# 任务定义
请为[主题/目的]创建一个专业的SVG图像。
## 图片规格
- 尺寸：[宽x高，如750x1334px]
- 背景：[背景颜色/渐变要求]
- 视觉风格：[如现代简约/卡通/扁平化/等距图/水墨等]
## 内容结构
1. [主要内容元素1，如标题区]
2. [主要内容元素2，如内容区]
3. [主要内容元素3，如数据展示区]
...
## 设计风格
- 配色方案：[指定主色调/辅助色/强调色]
- 字体要求：[字体家族/大小/粗细等]
- 图形元素：[需要包含的图标/装饰/视觉元素]
- 布局安排：[元素排列方式/留白/对齐]
## 技术要求
- 动效需求：[是否需要动画/交互效果]
- 文本处理：[文字排版要求/截断处理]
- 图形质量：[线条粗细/圆角设置/阴影效果]
- 格式输出：[确保SVG代码完整/有效]
## 特殊要求
- [其他特殊注意事项或要求]
## 参考资料
[可以添加参考素材/内容]
我们可以看到，这个模板涵盖了SVG内容创建的所有关键方面，从内容结构到技术实现，从资源配置到交付要求。这种全面性确保生成的SVG内容没有重大遗漏，进而也就确保了输出的确定性✅
有了模板之后，用法就很简单了：把你的要求和需要的功能，连同模板一起扔给AI，让AI生成具体的提示词。然后就可以用这个提示词去生成SVG图像。
❗️注意，很多时候我们不是一次性就可以得到想要的效果，但有了这个模板，很大概率通过2-3轮的对话就能迭代出你想要的。
1. 选择合适的图片类型：根据你的需求，从流程图、思维导图、信息图表等中选择
2. 定制设计风格：选择适合内容的视觉风格和配色方案
3. 明确内容结构：清晰列出你需要在SVG中展示的主要内容元素
4. 添加参考资料：提供你希望AI参考的文字内容或图片
5. 迭代优化：生成后如有需要，可以要求AI调整特定部分
把提示词模板和要求一起给AI让它生成新的AI提示词，参考：AI做HTML的终极方案，一套提示词模板搞定所有应用：PPT、简历、高保真原型图、知识卡片、动态交互组件等
案例1：小红书风格知识卡片
提示词示例：
# 任务定义
请为"SVG图片的场景应用"创建一个适合小红书平台的精美SVG卡片。
## 图片规格
- 尺寸：750x1334px（竖屏，适合手机阅读）
- 背景：柔和渐变背景，从浅粉到浅蓝
- 视觉风格：现代简约，高颜值，有设计感
## 内容结构
1. 标题区：突出显示主题名称和副标题
2. 简介区：一句话解释这项技术
3. 核心特点区：列出3-4个关键特点，配以图标
4. 实用价值区：解释为什么这项技术很重要
5. 底部信息区：放置开源地址等额外信息
## 设计风格
- 配色方案：以紫色系为主色调，搭配白色内容区和柔和色块
- 字体要求：现代无衬线字体，标题加粗，字号层次分明
- 图形元素：使用简洁几何形状作为装饰，圆形或波浪状点缀
- 布局安排：卡片式布局，内容区有适当圆角和柔和阴影
## 技术要求
- 文本处理：确保所有文字清晰可读，标题醒目
- 图形质量：使用圆角矩形，适当添加柔和阴影增加层次感
- 格式输出：完整SVG代码，确保没有错误
## 特殊要求
- 确保信息呈现清晰易懂，适合小白用户
- 整体设计要具有"一眼惊艳"的视觉效果
- 不要包含"小白"、"炸裂"等极限词
SVG代码生成如下：
好的，遵从您的要求，我为您精心设计并制作了一张关于“SVG图片的场景应用”的小红书风格SVG卡片。
这张卡片严格按照您提供的规格和设计风格指南创建，旨在实现“一眼惊艳”的视觉效果，同时信息传达清晰易懂。
---
### 设计亮点解析
* **柔和渐变背景**：从上方的`#FFDDE1`（樱花粉）到下方的`#C8E6FF`（天空蓝），营造出柔和、梦幻的视觉基调，非常符合小红书的审美。
* **现代简约布局**：采用卡片式设计，将不同信息模块清晰地划分在带有圆角和柔和阴影的白色/浅紫色卡片上，层次分明，富有呼吸感。
* **紫色主色调**：从标题的渐变紫到内容卡片的点缀色，统一使用紫色系，既高级又具有科技感，与主题相得益彰。
* **图标化表达**：为每个核心特点都设计了简洁的线条图标，将抽象概念具体化，帮助用户快速理解。
* **字体层次清晰**：标题使用加粗大号字体，并应用了线性渐变，极具视觉冲击力。正文、副标题、描述文字的字号和颜色都经过精心调校，保证了阅读的舒适性和信息的主次关系。
* **装饰性元素**：在背景中点缀了几个半透明的几何圆形，增加了画面的趣味性和设计感，但又不会干扰主体内容。
---
### 完整SVG代码
您可以直接复制以下代码，并将其保存为`.svg`文件。在浏览器中打开即可看到最终效果。
```xml
<svgwidth="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>
<!-- 背景渐变：从粉到蓝 -->
<linearGradientid="bg-gradient"x1="0%"y1="0%"x2="0%"y2="100%">
<stopoffset="0%"style="stop-color:#FFDDE1; stop-opacity:1" />
<stopoffset="100%"style="stop-color:#C8E6FF; stop-opacity:1" />
</linearGradient>
<!-- 标题文字渐变：从深紫到亮紫 -->
<linearGradientid="title-gradient"x1="0%"y1="0%"x2="100%"y2="0%">
<stopoffset="0%"style="stop-color:#6A11CB;" />
<stopoffset="100%"style="stop-color:#2575FC;" />
</linearGradient>
<!-- 柔和阴影滤镜 -->
<filterid="soft-shadow"x="-20%"y="-20%"width="140%"height="140%">
<feDropShadowdx="0"dy="4"stdDeviation="10"flood-color="#4A148C"flood-opacity="0.1" />
</filter>
</defs>
<!-- === 背景层 === -->
<rectwidth="750"height="1334"fill="url(#bg-gradient)" />
<!-- 装饰性图形 -->
<circlecx="100"cy="200"r="80"fill="#ffffff"opacity="0.15"/>
<circlecx="700"cy="550"r="120"fill="#A48BFF"opacity="0.1"/>
<circlecx="150"cy="1100"r="100"fill="#ffffff"opacity="0.2"/>
<!-- === 内容层 === -->
<gid="content-group">
<!-- 1. 标题区 -->
<gid="title-area"text-anchor="middle">
<textx="375"y="160"font-size="64"font-weight="bold"fill="url(#title-gradient)">SVG 图片的场景应用</text>
<textx="375"y="215"font-size="24"fill="#555768">矢量图形的魔法世界</text>
</g>
<!-- 2. 简介区 -->
<gid="intro-area">
<rectx="50"y="270"width="650"height="90"rx="20"fill="#F8F4FF"filter="url(#soft-shadow)" />
<textx="375"y="325"text-anchor="middle"font-size="22"fill="#6A5ACD">
一种不失真的图像格式，让你的设计更灵活
</text>
</g>
<!-- 3. 核心特点区 -->
<gid="features-area">
<!-- 特点1: 无限缩放 -->
<g>
<rectx="50"y="400"width="650"height="150"rx="20"fill="white"filter="url(#soft-shadow)" />
<!-- Icon: 缩放 -->
<gtransform="translate(90, 445)"stroke="#8A2BE2"stroke-width="3"fill="none"stroke-linecap="round"stroke-linejoin="round">
<pathd="M 0 20 L 20 0 M 12 0 L 20 0 L 20 8"/>
<pathd="M 40 40 L 60 60 M 40 52 L 40 60 L 48 60"/>
<circlecx="30"cy="30"r="12"/>
</g>
<textx="180"y="465"font-size="26"font-weight="600"fill="#333">无限缩放</text>
<textx="180"y="505"font-size="20"fill="#777">任意放大不模糊，保持高清锐利</text>
</g>
<!-- 特点2: 轻量高效 -->
<g>
<rectx="50"y="580"width="650"height="150"rx="20"fill="white"filter="url(#soft-shadow)" />
<!-- Icon: 羽毛 -->
<gtransform="translate(90, 625)"stroke="#8A2BE2"stroke-width="3"fill="none"stroke-linecap="round"stroke-linejoin="round">
<pathd="M30,0 Q60,30 30,60 Q0,30 30,0 Z"fill="#E6E6FA"/>
<pathd="M30,0 Q60,30 30,60"/>
<pathd="M20,15 L40,35"/>
<pathd="M20,30 L40,50"/>
</g>
<textx="180"y="645"font-size="26"font-weight="600"fill="#333">轻量高效</text>
<textx="180"y="685"font-size="20"fill="#777">文件体积小，加载速度快，利于SEO</text>
</g>
<!-- 特点3: 动态交互 -->
<g>
<rectx="50"y="760"width="650"height="150"rx="20"fill="white"filter="url(#soft-shadow)" />
<!-- Icon: 魔术棒 -->
<gtransform="translate(95, 805)"stroke="#8A2BE2"stroke-width="3"fill="#E6E6FA"stroke-linecap="round"stroke-linejoin="round">
<pathd="M0,0 L30,30 M10,35 L5,40 M40,10 L35,5"/>
<polygonpoints="30,30 45,15 60,30 45,45" />
</g>
<textx="180"y="825"font-size="26"font-weight="600"fill="#333">动态交互</text>
<textx="180"y="865"font-size="20"fill="#777">可通过代码控制，实现酷炫动画效果</text>
</g>
</g>
<!-- 4. 实用价值区 -->
<gid="value-area">
<rectx="50"y="950"width="650"height="190"rx="20"fill="#EDE7F6"filter="url(#soft-shadow)" />
<textx="375"y="1000"text-anchor="middle"font-size="28"font-weight="bold"fill="#4A148C">为什么它如此重要？</text>
<textx="80"y="1055"font-size="21"fill="#4A235A"line-height="1.6">
<tspanx="80"dy="0">从动态Logo、数据可视化图表到个性化图标，</tspan>
<tspanx="80"dy="1.4em">SVG正在重塑现代Web设计，</tspan>
<tspanx="80"dy="1.4em">全方位提升用户体验。</tspan>
</text>
</g>
<!-- 5. 底部信息区 -->
<gid="footer-area"text-anchor="middle"fill="#6c757d">
<!-- GitHub Icon -->
<pathfill="#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"/>
<textx="375"y="1285"font-size="18">
<tspan>了解更多 & 探索开源项目</tspan>
</text>
</g>
</g>
</svg>
```
SVG效果图：
案例2：技术路线图
提示词示例：
# 任务定义
请为"Java全栈工程师学习路线"创建一个专业的SVG路线图。
## 图片规格
- 尺寸：1200x800px（横版，适合电脑查看）
- 背景：浅灰色或白色背景，保持专业感
- 视觉风格：扁平化设计，专业清晰
## 内容结构
1. 标题区：路线图名称和简介
2. 基础知识区：Java基础、数据结构等入门知识
3. 后端技术区：Spring、数据库等后端知识
4. 前端技术区：HTML/CSS/JS等前端知识
5. 进阶技能区：微服务、云原生等高级技能
6. 学习路径：用箭头或连线表示学习顺序和依赖关系
## 设计风格
- 配色方案：蓝色系为主，使用橙色作为强调色
- 字体要求：无衬线字体，标题18-24px，正文14-16px
- 图形元素：使用技术相关图标表示不同技能点
- 布局安排：从左到右或从上到下的渐进式布局，清晰显示进阶路径
## 技术要求
- 图形质量：所有元素保持一致的视觉风格
- 文本处理：确保所有文字清晰可读，避免过度拥挤
- 格式输出：确保SVG代码完整，支持在浏览器中正确显示
## 特殊要求
- 使用连线或箭头明确展示学习路径和依赖关系
- 为不同难度或阶段的内容用不同颜色区分
SVG效果图：
案例3：甘特图
提示词示例：
# 任务定义
请为"毛坯房装修"创建一个SVG甘特图。
## 图片规格
- 尺寸：1000x600px
- 背景：简洁浅色背景
- 视觉风格：现代简约，信息聚焦
## 内容结构
1. 标题区：图表名称和简短说明
2. 时间轴区：横向时间轴，按月份划分
3. 模型区域：各大装修模块（如基础硬装、软装设计、家具进场等）分行显示
4. 重点标记：重要节点用特殊标记突出
5. 图例说明：不同颜色或标记的含义说明
## 设计风格
- 配色方案：使用不同颜色区分不同装修的内容，保持色彩协调
- 字体要求：清晰易读的无衬线字体
- 图形元素：使用圆形或菱形标记重要节点，线条表示持续时间
- 布局安排：时间轴水平延伸，模型垂直排列
## 技术要求
- 图形质量：清晰的线条和边界，合适的间距
- 文本处理：重要信息突出显示，避免文字拥挤
- 格式输出：确保SVG代码完整，元素定位准确
## 特殊要求
- 重要节点添加简短说明文本
- 为不同难度或阶段的内容用不同颜色区分
SVG效果图：
案例4：数据可视化
提示词示例：
# 任务定义
请为"新车小米yu7性能分析"创建一个SVG数据可视化图表。
## 图片规格
- 尺寸：750x1334px（竖屏，适合手机阅读）
- 背景：简洁浅色背景
- 视觉风格：现代简约，信息聚焦，重点突出
## 内容结构
1. 标题区：图表名称和简短说明
2. 核心特点区：列出3-4个关键特点，配以数据说明
3. 实用价值区：解释为什么这项技术很重要
4. 重点标记：重要节点用特殊标记突出
5. 图例说明：不同颜色或标记的含义说明
## 设计风格
- 配色方案：灰色系为主，保持色彩协调
- 字体要求：清晰易读的无衬线字体
- 图形元素：使用矩阵形状展示重要数据
- 布局安排：矩阵型布局，有要重点突出
## 技术要求
- 图形质量：清晰的线条和边界，合适的间距
- 文本处理：重要信息突出显示，避免文字拥挤
- 格式输出：确保SVG代码完整，元素定位准确
## 特殊要求
- 重要节点添加简短说明文本
- 整体设计要具有"一眼惊艳"的视觉效果，符合车企文化
SVG效果图：
案例5：原型图
提示词示例：
### # 任务定义
为社交应用“微信”的“我”（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可以通过以下方式进行后期编辑：
1. 在线SVG编辑器
使用 SVG编辑器 https://unpkg.com/svgedit@7.3.4/dist/editor/index.html进行可视化编辑；也可以在线 SVG 编辑工具进行二次编辑，
比如 https://www.jyshare.com/more/svgeditor/
然后所生成的内容就出现在画面中，我们可以根据自己的需要来对图片进行修改。点选内容，出现如图虚线框即可进行移动和修改，移动虚线框来移动内容，双击文字内容进行修改。按住shift键并选择多内容，可以一并移动。
修改完成后，点击左上角，选择下方【Export】进行导出，可以根据自己的需要来选择各种图片和或PDF格式。选择保存后它会跳出一个新的界面，点击右键另存为图片。
2. PowerPoint编辑：
3. 代码编辑：直接用AI编程来修改SVG代码调整具体参数
除了饼干哥哥这篇文章的提示词，我还找到阿里云发布的AI生成SVG提示词，效果也不错，感兴趣的可以试下。
DeepSeek-V3-0324 版本：
### Role
作为一个跨领域专家团队：
1. 高级技术插画师 - 精通 SVG 技术和视觉设计
2. 可视化专家 - 擅长将复杂概念转化为直观图像
3. 教育内容设计师 - 专注于知识传递的清晰性和效果
### Background
用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于：
- 需要将抽象概念具象化
- 提高信息传递的效率和准确性
- 增强学习体验和理解深度
### Profile
- 深入理解 SVG 技术规范和最佳实践
- 具备强大的视觉设计能力和美感
- 拥有丰富的教育内容设计经验
- 善于将复杂信息简化并可视化
### Skills
- SVG 代码编写和优化能力
- 信息架构和视觉层次设计
- 教育心理学原理应用
- 响应式设计和交互优化
### Goals
1. 准确理解用户输入的概念/内容
2. 设计最适合表达该概念的视觉元素
3. 生成高质量、可维护的 SVG 代码
4. 确保视觉表达的教育效果
### Constraints
- SVG 代码必须符合 W3C 标准
- 视觉元素要简洁明了
- 确保跨平台兼容性
- 遵循响应式设计原则
- [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！
- 默认尺寸是 16:10
- 特别注意布局的合理性，避免出现不必要的重叠、遮挡等
### OutputFormat
<svgxmlns="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 版本：
### Role
作为一个跨领域专家团队：
1. 高级技术插画师 - 精通 SVG 技术和视觉设计
2. 可视化专家 - 擅长将复杂概念转化为直观图像
3. 教育内容设计师 - 专注于知识传递的清晰性和效果
### Background
用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于：
- 需要将抽象概念具象化
- 提高信息传递的效率和准确性
- 增强学习体验和理解深度
### Profile
- 深入理解 SVG 技术规范和最佳实践
- 具备强大的视觉设计能力和美感
- 拥有丰富的教育内容设计经验
- 善于将复杂信息简化并可视化
### Skills
- SVG 代码编写和优化能力
- 信息架构和视觉层次设计
- 教育心理学原理应用
- 响应式设计和交互优化
### Goals
1. 准确理解用户输入的概念/内容
2. 设计最适合表达该概念的视觉元素
3. 生成高质量、可维护的 SVG 代码
4. 确保视觉表达的教育效果
### Constraints
- SVG 代码必须符合 W3C 标准
- 视觉元素要简洁明了
- 确保跨平台兼容性
- 遵循响应式设计原则
- [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！
- 默认尺寸是 16:10
- 特别注意布局的合理性，避免出现不必要的重叠、遮挡等
### OutputFormat
<svgxmlns="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] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！
1. 参考优质案例：提供参考图片或代码给AI学习
2. 保持一致性：为系列内容使用统一的视觉风格
3. 多轮迭代：如果第一次生成不满意，描述需要改进的地方进行重新调整
4. 标记重点内容：告诉AI哪些是需要突出的关键信息，添加说明
5. 控制信息密度：避免过多内容导致视觉混乱
通过这套提示词模板和各种实践案例，我们可以看出来这套SVG的提示词还是非常能打的，即使没有啥设计经验的人也能创建出审美在线、输出稳定的SVG图表，大大提高了内容创作效率和质量。
当然，对于更具体的场景应用，以及更精美的图表要求，就需要在这个基础上让AI不断生成多版本和打磨。希望这套方案能让你的画图能力锦上添花，创造出令人惊艳的可视化内容！
SVG很多场景无法直接用，但可以借助 SVG 查看器如：
SVGViewer（https://www.svgviewer.dev/） 转换为 PNG 下载使用。
文章来自于微信公众号“饼干哥哥AGI”。
【开源免费】LangGPT 是一个通过结构化和模板化的方法，编写高质量的AI提示词的开源项目。它可以让任何非专业的用户轻松创建高水平的提示词，进而高质量的帮助用户通过AI解决问题。
项目地址：https://github.com/langgptai/LangGPT/blob/main/README_zh.md
在线使用：https://kimi.moonshot.cn/kimiplus/conpg00t7lagbbsfqkq0