AI做SVG的终极方案，一套提示词模板无痛搞定：小红书知识卡片、数据可视化图表、原型图、动态图……

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

开通会员

发布

AI做SVG的终极方案，一套提示词模板无痛搞定：小红书知识卡片、数据可视化图表、原型图、动态图……

饼干哥哥

2025-07-07

0 评论 1712 浏览 6 收藏

在信息爆炸的时代，如何高效、精准地传达复杂信息？SVG（可缩放矢量图形）凭借其无损缩放、可编辑性强、文件体积小等优势，成为数据可视化和图形设计的首选格式。本文将手把手教你如何利用AI和一套通用提示词模板，轻松生成小红书知识卡片、数据可视化图表、原型图、动态图等精美SVG图形，无需设计经验，也能快速上手，让你的内容创作效率翻倍！

相对于文字，图像信息更能直观地传达复杂的信息和概念，其最大的优势是直观、高效、精准。

作为一名数据分析师，画图是我工作中必不可少的一部分。无论是汇报时的ppt展示图、还是做计划时的流程图、亦或是小组讨论时的思维导图……我们无时无刻都在跟图表打交道，也通过图表来完善我们的工作。

AI生成的SVG – 架构图

以前画图需要找各种模板，各种拼接，还要学习配色，技术含量不高但就是磨人，一张图可能就要花上一两个小时。可现在，泡杯咖啡的功夫，AI就能帮你完成，而且效果不由得让人一键三连！！！

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

确实，AI在SVG图形生成领域展现出惊人能力，不仅可以生成精美的小红书图文、流程图、思维导图，还能创建专业级别的技术文档配图和教育科普可视化内容。

我最近也花了不少时间来分析各类SVG案例，总结出一套通用提示词模板，让你用一套模板就能生成各种精美SVG图形，无需记忆复杂提示词，无痛搞定所有应用，只有一句“so easy～”。

今天饼干哥哥就到你手把手体验一下，保证你看完就能上手！SVG(可缩放矢量图形)的独特优势:

无损缩放：放大不失真，适合任何尺寸设备
可编辑性：生成后可二次编辑修改各个元素
文件小：代码形式存储，体积小于位图
动效支持：可添加交互和动画效果

SVG 格式文件将图像存储为矢量，这是一种基于数学公式由点、线、曲线和形状组成的图形。图形可以无限缩放而不失真，非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等需要无损缩放的图片。其文件本质上是 XML 格式的文本代码，可以直接嵌入网页或导入各种设计工具。

Claude生成的动态SVG

AI 生成的 SVG 代码可以直接嵌入网页或导入设计工具，也可以保存为 SVG 文件直接双击在浏览器内打开。

使用 SVG 的另一个优点是可以精确控制每个元素的位置、大小和样式，甚至能添加动画效果，让图片更加生动。

SVG提示词通用模板

# 任务定义

请为[主题/目的]创建一个专业的SVG图像。

## 图片规格

– 尺寸：[宽x高，如750x1334px]

– 背景：[背景颜色/渐变要求]

– 视觉风格：[如现代简约/卡通/扁平化/等距图/水墨等]

## 内容结构

1. [主要内容元素1，如标题区]

2. [主要内容元素2，如内容区]

3. [主要内容元素3，如数据展示区]

…

## 设计风格

– 配色方案：[指定主色调/辅助色/强调色]

– 字体要求：[字体家族/大小/粗细等]

– 图形元素：[需要包含的图标/装饰/视觉元素]

– 布局安排：[元素排列方式/留白/对齐]

## 技术要求

– 动效需求：[是否需要动画/交互效果]

– 文本处理：[文字排版要求/截断处理]

– 图形质量：[线条粗细/圆角设置/阴影效果]

– 格式输出：[确保SVG代码完整/有效]

## 特殊要求

– [其他特殊注意事项或要求]

## 参考资料

[可以添加参考素材/内容]

我们可以看到，这个模板涵盖了SVG内容创建的所有关键方面，从内容结构到技术实现，从资源配置到交付要求。这种全面性确保生成的SVG内容没有重大遗漏，进而也就确保了输出的确定性

有了模板之后，用法就很简单了：把你的要求和需要的功能，连同模板一起扔给AI，让AI生成具体的提示词。然后就可以用这个提示词去生成SVG图像。

注意，很多时候我们不是一次性就可以得到想要的效果，但有了这个模板，很大概率通过2-3轮的对话就能迭代出你想要的。

SVG图片类型指南

设计风格与配色方案

如何使用这个模板

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图片后期编辑方法

生成的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编辑

插入SVG文件：在PPT中点击”插入” > “图片” > “来自文件的图片”

转换为可编辑形状：选择SVG图像，右键点击 > “转换为形状” > “取消组合”

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] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！