gemini-svg-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Gemini SVG Creator

Gemini SVG 生成器

Generate high-quality SVG graphics by orchestrating Gemini 3.1 Pro via

mcp__gemini__gemini-query

. Claude handles prompt engineering, quality analysis, and optimization; Gemini 3.1 Pro handles SVG generation with its SOTA animated SVG and reasoning capabilities.

通过

mcp__gemini__gemini-query

调用Gemini 3.1 Pro，生成高质量SVG图形。Claude负责提示词工程、质量分析与优化；Gemini 3.1 Pro凭借其业界领先的动画SVG生成能力与推理能力完成SVG生成工作。

Prerequisites

前置要求

This skill requires the

@rlabs-inc/gemini-mcp

MCP server. On first use, verify setup:

Check MCP server is available: Try calling

mcp__gemini__gemini-query

. If it fails, tell the user to add the Gemini MCP server:

claude mcp add -e GEMINI_API_KEY=<your-key> -e GEMINI_PRO_MODEL=gemini-3.1-pro-preview gemini -- npx -y @rlabs-inc/gemini-mcp

Recommend Gemini 3.1 Pro: If the MCP server works but uses an older model, suggest adding
```
GEMINI_PRO_MODEL=gemini-3.1-pro-preview
```
to the MCP server env for best SVG quality. The user can update their
```
.claude.json
```
or run
```
claude mcp remove gemini
```
then re-add with the env variable above.
API key: Requires a Google AI Studio API key (
```
GEMINI_API_KEY
```
). Get one free at https://aistudio.google.com/apikey

使用本技能需要

@rlabs-inc/gemini-mcp

MCP服务器。首次使用时，请验证以下设置：

检查MCP服务器可用性：尝试调用

mcp__gemini__gemini-query

。若调用失败，请告知用户添加Gemini MCP服务器：

claude mcp add -e GEMINI_API_KEY=<your-key> -e GEMINI_PRO_MODEL=gemini-3.1-pro-preview gemini -- npx -y @rlabs-inc/gemini-mcp

推荐使用Gemini 3.1 Pro：若MCP服务器可用但使用的是旧版本模型，建议用户在MCP服务器环境变量中添加
```
GEMINI_PRO_MODEL=gemini-3.1-pro-preview
```
以获得最佳SVG生成质量。用户可更新
```
.claude.json
```
文件，或先运行
```
claude mcp remove gemini
```
，再通过上述环境变量重新添加服务器。
API密钥：需要Google AI Studio提供的API密钥（
```
GEMINI_API_KEY
```
）。可通过https://aistudio.google.com/apikey免费获取。

Model Notes — Gemini 3.1 Pro

模型说明 —— Gemini 3.1 Pro

Model ID:
```
gemini-3.1-pro-preview
```
(configured via
```
GEMINI_PRO_MODEL
```
env)
Thinking levels:
```
low
```
,
```
medium
```
,
```
high
```
(default). Use
```
medium
```
for simple SVGs,
```
high
```
for complex/animated
Strengths: Animated SVG generation, anatomically accurate illustrations, semantic SVG comments, complex scene composition, CSS animation with proper keyframes
Context: 1M input tokens, 64K output tokens
Known quirk: May have high latency under load. If timeout occurs, retry once
Temperature: Keep default (1.0) — lower values degrade reasoning quality

模型ID：
```
gemini-3.1-pro-preview
```
（通过
```
GEMINI_PRO_MODEL
```
环境变量配置）
思考等级：
```
low
```
、
```
medium
```
、
```
high
```
（默认值为
```
high
```
）。简单SVG使用
```
medium
```
，复杂/动画SVG使用
```
high
```
优势：动画SVG生成、解剖结构准确的插画、语义化SVG注释、复杂场景构图、带有正确关键帧的CSS动画
上下文窗口：100万输入token，6.4万输出token
已知特性：高负载下可能存在高延迟。若出现超时，可重试一次
温度参数：保持默认值（1.0）—— 降低该值会影响推理质量

Workflow

工作流程

1. Understand request → Determine SVG category + complexity
2. Build prompt → Load category template from references/prompt-templates.md
3. Generate → Call Gemini 3.1 Pro with crafted prompt (thinkingLevel by complexity)
4. Analyze → Claude reviews SVG for issues
5. Refine → Send fix prompt back to Gemini (up to 2 rounds)
6. Optimize → Claude cleans up final SVG (see references/svg-optimization.md)
7. Save → Write .svg file(s) and present to user

1. 理解需求 → 确定SVG类别与复杂度
2. 构建提示词 → 从references/prompt-templates.md加载类别模板
3. 生成SVG → 使用构建好的提示词调用Gemini 3.1 Pro（根据复杂度选择对应思考等级）
4. 分析结果 → Claude检查SVG是否存在问题
5. 优化迭代 → 将修复提示词发送给Gemini（最多2轮）
6. 最终优化 → Claude清理最终SVG（详见references/svg-optimization.md）
7. 保存交付 → 写入.svg文件并交付给用户

Step 1: Understand & Classify

步骤1：理解与分类

Determine the SVG category and complexity:

Category	Triggers	Complexity
logo	logo, brand, wordmark, lettermark, emblem, badge	medium
icon	icon, symbol, pictogram, glyph, favicon	low
illustration	illustration, scene, drawing, artwork, graphic	high
infographic	infographic, data visualization, chart, diagram	high
pattern	pattern, texture, background, tile, seamless	medium
animated	animated, animation, motion, loading, spinner	high
animated-scene	animated illustration, character animation, story	high
ui-element	button, card, banner, header, component	low-medium

Gather any missing essentials:

What to depict (subject, content, data)
Style preference (minimalist, gradient, hand-drawn, isometric, etc.)
Colors (specific hex values, or a mood like "warm", "corporate", "playful")
Size/ratio (square, wide, tall — defaults to
```
0 0 800 600
```
if unspecified)
Animation (if animated: what moves, speed, loop behavior)

Do NOT over-question. If the user gave a clear description, proceed immediately.

确定SVG的类别与复杂度：

类别	触发词	复杂度
logo	logo、品牌标识、文字标志、字母标志、徽章、标识牌	中等
图标	图标、符号、象形图、字形、网站图标（favicon）	低
插画	插画、场景、绘画、艺术品、图形	高
信息图	信息图、数据可视化、图表、示意图	高
图案	图案、纹理、背景、平铺元素、无缝图案	中等
动画类	动画、动态效果、运动、加载动画、加载指示器	高
动画场景	动画插画、角色动画、故事场景	高
UI元素	按钮、卡片、横幅、页眉、组件	低-中等

收集必要的补充信息：

内容主体：要描绘的对象、内容、数据
风格偏好：极简风、渐变、手绘、等轴测等
颜色要求：具体十六进制值，或风格倾向（如"暖色调"、"商务风"、"活泼风"）
尺寸/比例：正方形、宽屏、竖屏——未指定时默认使用
```
0 0 800 600
```
动画细节：若为动画SVG，需明确移动元素、速度、循环方式

避免过度询问。若用户已给出清晰描述，可直接进入下一步。

Step 2: Build the Prompt

步骤2：构建提示词

Read

references/prompt-templates.md

for the system prompt and category-specific suffix.

Construct the Gemini prompt as:

[Master System Prompt for Gemini 3.1 Pro]

[Category-Specific Suffix]

[Style Modifier (if applicable)]

Now create: [user's description, enriched with design details]

Colors: [specified or "choose a harmonious palette suited to the subject"]
ViewBox: [specified or default]

Prompt enrichment rules:

Add composition guidance (center the subject, use negative space, layer foreground/background)
Specify element count to control complexity (fewer = cleaner)
Name specific SVG features when relevant (gradients, filters, clipPaths, masks)
For text in SVGs, specify: font-family (use web-safe), font-size, font-weight, fill
For animations, describe timing, easing, and which elements move
Leverage Gemini 3.1 Pro's strength: request semantic HTML comments describing each section

阅读

references/prompt-templates.md

获取系统提示词及类别专属后缀。

按以下结构构建Gemini提示词：

[Gemini 3.1 Pro专属主系统提示词]

[类别专属后缀]

[风格修饰词（如适用）]

现在需要创建：[用户需求描述，补充设计细节]

颜色：[指定颜色或"选择与主题匹配的和谐配色"]
ViewBox：[指定值或默认值]

提示词补充规则：

添加构图指导（主体居中、留白使用、前景/背景分层）
指定元素数量以控制复杂度（元素越少越简洁）
必要时明确指定SVG特性（渐变、滤镜、clipPaths、遮罩）
若SVG包含文字，需指定：字体族（使用web安全字体）、字号、字重、填充色
对于动画，描述时间、缓动效果及移动元素
发挥Gemini 3.1 Pro的优势：要求添加描述各部分的语义化HTML注释

Step 3: Generate

步骤3：生成SVG

Select thinking level based on complexity:

Complexity	thinkingLevel	Use for
low	`low`	Simple icons, basic shapes
medium	`medium`	Logos, patterns, UI elements
high	`high`	Illustrations, animations, complex scenes

Call Gemini 3.1 Pro:

mcp__gemini__gemini-query(
  prompt: <constructed prompt>,
  model: "pro",
  thinkingLevel: <selected level>
)

Extract the SVG from the response. Strip any markdown fences, explanatory text, or preamble — keep only

<svg>...</svg>

If timeout/error occurs: Retry once. Gemini 3.1 Pro may have high latency for complex SVGs.

根据复杂度选择对应思考等级：

复杂度	思考等级	适用场景
低	`low`	简单图标、基础形状
中等	`medium`	Logo、图案、UI元素
高	`high`	插画、动画、复杂场景

调用Gemini 3.1 Pro：

mcp__gemini__gemini-query(
  prompt: <构建好的提示词>,
  model: "pro",
  thinkingLevel: <选定的等级>
)

从响应中提取SVG内容。移除所有markdown围栏、解释性文字或前缀 —— 仅保留

<svg>...</svg>

部分。

若出现超时/错误：重试一次。Gemini 3.1 Pro生成复杂SVG时可能存在高延迟。

Step 4: Analyze

步骤4：分析

Review the returned SVG for:

Validity — Well-formed XML? All tags closed? Attributes quoted?
Completeness — Does it match what was requested? Missing elements?
Quality — Proportions correct? Colors harmonious? Text readable?
Structure — Has viewBox? Uses
```
<defs>
```
for reusables? Groups organized?
Bloat — Unnecessary elements? Excessive precision? Redundant attributes?
Animation (if animated) — All @keyframes defined? prefers-reduced-motion? Smooth loops?
```
stdDeviation
```
not
```
stdDev
```
?

Score mentally: if 2+ issues found, proceed to refinement.

检查返回的SVG是否存在以下问题：

有效性：XML格式是否规范？所有标签是否闭合？属性是否加引号？
完整性：是否符合需求？是否缺少元素？
质量：比例是否正确？配色是否和谐？文字是否可读？
结构：是否包含viewBox？是否使用
```
<defs>
```
存放可复用元素？分组是否清晰？
冗余性：是否存在不必要的元素？过度精确的数值？重复属性？
动画检查（若为动画SVG）：所有@keyframes是否已定义？是否包含prefers-reduced-motion？循环是否流畅？是否将
```
stdDev
```
修正为
```
stdDeviation
```
？

进行主观评分：若发现2个及以上问题，进入优化迭代步骤。

Step 5: Refine (up to 2 rounds)

步骤5：优化迭代（最多2轮）

If issues exist, send a targeted fix prompt to Gemini:

Here is an SVG that needs fixes:

<svg>...the current SVG...</svg>

Issues to fix:
1. [specific issue and how to fix it]
2. [specific issue and how to fix it]

[Include Quality Checklist Prompt from references/prompt-templates.md]

Call

mcp__gemini__gemini-query

again with

model: "pro"

, same or higher

thinkingLevel

After 2 refinement rounds, stop refining and proceed to optimization — diminishing returns beyond this.

若存在问题，向Gemini发送针对性修复提示词：

以下SVG需要修复：

<svg>...当前SVG内容...</svg>

需要修复的问题：
1. [具体问题及修复方式]
2. [具体问题及修复方式]

[加入references/prompt-templates.md中的质量检查清单提示词]

再次调用

mcp__gemini__gemini-query

，使用

model: "pro"

及相同或更高等级的

thinkingLevel

。

经过2轮优化后停止迭代，进入最终优化步骤 —— 超过2轮后收益递减。

Step 6: Optimize

步骤6：最终优化

Apply Claude-side cleanup (see

references/svg-optimization.md

for full checklist):

Strip wrapping — Remove markdown fences, text outside
```
<svg>
```
tags
Fix xmlns — Ensure
```
xmlns="http://www.w3.org/2000/svg"
```
present
Fix viewBox — Ensure viewBox is set and frames content properly
Consolidate colors — Move inline colors to
```
<defs><style>
```
classes
Add accessibility — Add
```
<title>
```
and
```
<desc>
```
,
```
role="img"
```
,
```
aria-labelledby
```
Clean decimals — Round to 2 decimal places
Remove dead code — Empty groups, hidden elements, unused defs
Fix deprecated —
```
xlink:href
```
→
```
href
```
Fix filter typos —
```
stdDev
```
→
```
stdDeviation
```
(common Gemini output error)
Animation safety — Ensure
```
prefers-reduced-motion
```
media query present for animated SVGs

执行Claude端的清理操作（完整清单详见

references/svg-optimization.md

）：

移除包装内容：移除markdown围栏、
```
<svg>
```
标签外的所有文字
修复xmlns属性：确保包含
```
xmlns="http://www.w3.org/2000/svg"
```
修复viewBox：确保设置了viewBox且能正确适配内容
整合颜色：将内联颜色移至
```
<defs><style>
```
类中
添加无障碍支持：添加
```
<title>
```
和
```
<desc>
```
、
```
role="img"
```
、
```
aria-labelledby
```
清理小数：保留2位小数
移除无效代码：空分组、隐藏元素、未使用的defs
修复废弃语法：将
```
xlink:href
```
替换为
```
href
```
修复滤镜拼写错误：将
```
stdDev
```
替换为
```
stdDeviation
```
（Gemini常见输出错误）
动画安全检查：确保动画SVG包含
```
prefers-reduced-motion
```
媒体查询

Step 7: Save & Present

步骤7：保存与交付

Save SVG file(s) using the Write tool:

Use descriptive filename:

{subject}-{style}.svg

(e.g.,

rocket-minimalist.svg

)

For multiple variations, use numbered suffixes or style names
Default save location: current working directory, or user-specified path

Present to the user:

Show the SVG inline (the raw code)
Describe what was created and key design choices
Offer to iterate: "Want me to adjust colors, style, or add variations?"

使用Write工具保存SVG文件：

使用描述性文件名：

{主题}-{风格}.svg

（例如

rocket-minimalist.svg

）

若生成多个变体，使用编号后缀或风格名称区分
默认保存位置：当前工作目录，或用户指定路径

向用户交付：

内嵌展示SVG（原始代码）
说明创建内容及关键设计选择
提供迭代选项："需要调整颜色、风格或生成变体吗？"

Multi-Variation Workflow

多变体工作流程

When the user wants multiple concepts or variations:

Generate each variation as a separate Gemini call with modified prompts

Name files clearly:

logo-concept-1-geometric.svg

logo-concept-2-organic.svg

Present all variations with brief rationale for each
Let user pick favorites for refinement

当用户需要多个概念或变体时：

通过修改提示词，单独调用Gemini生成每个变体

清晰命名文件：

logo-concept-1-geometric.svg

、

logo-concept-2-organic.svg

展示所有变体并简要说明每个变体的设计思路
让用户选择偏好的变体进行优化

Style Quick Reference

风格速查

Style	Key characteristics
Minimalist	Few elements, monochrome/2-color, geometric, whitespace
Flat	No gradients/shadows, bold solids, clear silhouettes
Gradient	Linear/radial gradients, smooth transitions, modern depth
Hand-drawn	Imperfect lines, organic shapes, warm and friendly
Isometric	30-degree angles, consistent depth, flat-shaded faces
Glassmorphism	Semi-transparent, blur filters, frosted glass, subtle borders
Retro	Muted palette, halftone textures, rounded shapes
Line Art	Strokes only, no fills, consistent width, single color
Neon	Dark background, bright strokes, glow filter, high contrast
Geometric	Circles/rects/triangles only, mathematical precision, bold blocks

For full prompt templates per style, see

references/prompt-templates.md

风格	核心特征
极简风	元素少，单色/双色，几何形状，留白
扁平化	无渐变/阴影，纯色块，清晰轮廓
渐变风	线性/径向渐变，平滑过渡，现代感层次
手绘风	线条不完美，有机形状，温暖友好
等轴测	30度角，统一深度，平涂色块
玻璃拟态	半透明，模糊滤镜，毛玻璃效果，细微边框
复古风	低饱和度配色，半色调纹理，圆角形状
线稿风	仅描边，无填充，线条宽度一致，单色
霓虹风	深色背景，明亮描边，发光滤镜，高对比度
几何风	仅使用圆形/矩形/三角形，数学精度，大胆色块

各风格的完整提示词模板请查看

references/prompt-templates.md

。

Resources

资源

references/prompt-templates.md — Master system prompt (Gemini 3.1 Pro optimized), category suffixes, animation templates, style modifiers, quality checklist
references/svg-optimization.md — Post-generation cleanup checklist, common Gemini 3.1 Pro SVG issues and fixes

references/prompt-templates.md —— Gemini 3.1 Pro专属主系统提示词、类别后缀、动画模板、风格修饰词、质量检查清单
references/svg-optimization.md —— 生成后清理清单、Gemini 3.1 Pro SVG常见问题及修复方案",