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:

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:

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

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