Gemini SVG Creator

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.

Prerequisites

This skill requires the @rlabs-inc/gemini-mcp MCP server. On first use, verify setup:

1. 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
   

2. 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.
3. API key: Requires a Google AI Studio API key (GEMINI_API_KEY). Get one free at https://aistudio.google.com/apikey

Model Notes — 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

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

Step 1: Understand & Classify

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.

Step 2: Build the Prompt

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

Step 3: Generate

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.

Step 4: Analyze

Review the returned SVG for:

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

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

Step 5: Refine (up to 2 rounds)

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.

Step 6: Optimize

Apply Claude-side cleanup (see references/svg-optimization.md for full checklist):

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

Step 7: Save & Present

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?"

Multi-Variation Workflow

When the user wants multiple concepts or variations:

1. Generate each variation as a separate Gemini call with modified prompts
2. Name files clearly: logo-concept-1-geometric.svg, logo-concept-2-organic.svg
3. Present all variations with brief rationale for each
4. Let user pick favorites for refinement

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.

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