在信息爆炸的期间，何如高效、精确地传达复杂信息？SVG（可缩放矢量图形）凭借其无损缩放、可剪辑性强、文献体积小等上风，成为数据可视化和图形想象的首选面孔。本文将手把手教你何如诈欺AI和一套通用辅导词模板，轻便生成小红书常识卡片、数据可视化图表、原型图、动态图等致密SVG图形，无需想象警告，也能快速上手，让你的内容创作遵守翻倍！

相对于翰墨，图像信息更能直不雅地传达复杂的信息和宗旨，其最大的上风是直不雅、高效、精确。

手脚别称数据分析师，绘画是我使命中必不成少的一部分。不管是呈报时的ppt展示图、仍是作念筹划时的历程图、亦或是小组臆度时的想维导图……咱们物换星移都在跟图表打交谈，也通过图表来完善咱们的使命。

AI生成的SVG – 架构图

往日绘画需要找各式模板，各式拼接，还要学习配色，时间含量不高但即是磨东谈主，一张图可能就要花上一两个小时。可刻下，泡杯咖啡的功夫，AI就能帮你完成，况且遵守不由得让东谈主一键三连！！！

确乎，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>

<!– 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>

<!– 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>

</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代码完竣，元素定位准确

## 非常条目

– 进击节点添加简短阐发文本

案例4：数据可视化

请为”新车小米yu7性能分析”创建一个SVG数据可视化图表。

– 视觉作风：当代勤俭，信息聚焦，重心隆起

2. 中枢特质区：列出3-4个要害特质，配以数据阐发

3. 实用价值区：讲解为什么这项时间很进击

– 配色决策：灰色系为主，保持颜色互助

– 字体条目：明晰易读的无衬线字体

– 图形元素：使用矩阵体式展示进击数据

– 布局安排：矩阵型布局，有要重心隆起

– 举座想象要具有”一眼惊艳”的视觉遵守，适当车企文化

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 版块：

实用技巧

1. 参考优质案例：提供参考图片或代码给AI学习

2. 保持一致性：为系列内容使用调和的视觉作风

3. 多轮迭代：要是第一次生成不欢娱，形色需要矫正的地方进行重新调整

4. 象征重心内容：告诉AI哪些是需要隆起的要害信息，添加阐发

5. 收敛信息密度：幸免过多内容导致视觉杂乱

通过这套辅导词模板和各式实行案例，咱们可以看出来这套SVG的辅导词还口角常能打的，即使莫得啥想象警告的东谈主也能创建出审好意思在线、输出舒适的SVG图表，大大提高了内容创作遵守和质料。

虽然，对于更具体的场景应用，以及更致密的图表条目，就需要在这个基础上让AI不休生成多版块和打磨。但愿这套决策能让你的绘画智商诚心诚意，创造出令东谈主惊艳的可视化内容！

SVG许多场景无法平直用，但可以借助 SVG 稽察器如：

SVGViewer（https://www.svgviewer.dev/） 调整为 PNG 下载使用。

以上，既然看到这里了，要是认为可以，顺手点个赞、保举、转发三连吧，你的相沿是我无间创作的能源。咱们下期见。

本文由东谈主东谈主都是产品司理作家【饼干哥哥】，微信公众号：【饼干哥哥AGI】，原创/授权 发布于东谈主东谈主都是产品司理，未经许可，阻遏转载。

题图来自Unsplashwww.kaiyun，基于 CC0 条约。