SVG Artist

Generate images by writing SVG code with the text model. No image generation API needed.

How It Works

1. User describes the image → "画一只可爱的小猫" / "create a cartoon cat"
2. LLM writes SVG code → Calculates coordinates, shapes, colors
3. Convert to PNG → Using rsvg-convert or convert

Quick Start

User: 给我画一只小狗
You: [Generate SVG code] → Send the PNG

SVG Drawing Guide

Canvas Setup

Default size: 400x400 pixels. Origin (0,0) is top-left.

<svg width='400' height='400' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background -->
  <rect width='400' height='400' fill='#87CEEB'/>
  <!-- Your shapes here -->
</svg>

Basic Shapes

Circle

<circle cx='200' cy='200' r='50' fill='#FF6B6B' stroke='#333' stroke-width='2'/>

Ellipse (great for bodies, heads)

<ellipse cx='200' cy='200' rx='80' ry='50' fill='#D2691E' stroke='#8B4513' stroke-width='3'/>

Rectangle (legs, buildings)

<rect x='100' y='300' width='50' height='80' rx='10' fill='#666'/>

Polygon (ears, stars)

<polygon points='150,50 130,100 170,100' fill='#8B4513'/>

Path (curves, tails, mouths)

<!-- Arc -->
<path d='M 100 200 A 50 50 0 0 1 200 200' stroke='#333' stroke-width='3' fill='none'/>
<!-- Bezier curve -->
<path d='M 100 200 Q 150 150 200 200' stroke='#333' stroke-width='3' fill='none'/>

Proportional Design Tips

Use percentages of canvas size (400px):

1. Head: rx='70' ry='60' (about 15-20% of width)
2. Body: rx='100' ry='70' (about 25% of width)
3. Eyes: r='15' (about 4% of width)

Position using fractions:

1. Center X: 200 (50%)
2. Head Y: 140 (35%)
3. Body Y: 250 (62%)

Color Palette

Warm colors: #D2691E (chocolate), #FF6B6B (coral), #FFB347 (orange) Cool colors: #87CEEB (sky blue), #98FB98 (pale green), #DDA0DD (plum) Neutrals: #8B4513 (saddle brown), #808080 (gray), #F5F5DC (beige)

Common Patterns

Eyes (cute style)

<!-- Eye white -->
<ellipse cx='180' cy='130' rx='15' ry='15' fill='white' stroke='black' stroke-width='2'/>
<!-- Pupil -->
<ellipse cx='183' cy='132' rx='7' ry='7' fill='black'/>
<!-- Highlight -->
<ellipse cx='186' cy='130' rx='3' ry='3' fill='white'/>

Blush/cheeks

<ellipse cx='150' cy='160' rx='15' ry='10' fill='#FFB6C1' opacity='0.6'/>

Smile

<path d='M 180 170 A 25 25 0 0 0 220 170' stroke='#8B4513' stroke-width='3' fill='none'/>

Tongue

<ellipse cx='200' cy='190' rx='10' ry='15' fill='#FF69B4'/>

Step-by-Step Workflow

When user asks for an image:

Step 1: Understand the Subject

1. What animal/object? → dog, cat, house, car, etc.
2. What style? → cute, realistic, minimalist, cartoon
3. What pose? → sitting, standing, happy, sad

Step 2: Plan the Composition

Head position: cy = 35% (140)
Body position: cy = 62% (250)
Legs: cy = 78% (310)
Background: soft gradient or solid color

Step 3: Write SVG Code

Use Node.js inline to generate:

node -e "
const fs = require('fs');
const svg = \<svg>...</svg>\;
fs.writeFileSync('/tmp/image.svg', svg);
"

Step 4: Convert to PNG

rsvg-convert /tmp/image.svg -o /tmp/image.png
# or: convert /tmp/image.svg /tmp/image.png

Step 5: Send the Image

<qqimg>/tmp/image.png</qqimg>

Example: Drawing a Cat

<svg width='400' height='400' xmlns='http://www.w3.org/2000/svg'>
  <rect width='400' height='400' fill='#E6E6FA'/>

  <!-- Body -->
  <ellipse cx='200' cy='250' rx='100' ry='70' fill='#FFB347' stroke='#FF8C00' stroke-width='3'/>

  <!-- Head -->
  <ellipse cx='200' cy='140' rx='70' ry='60' fill='#FFB347' stroke='#FF8C00' stroke-width='3'/>

  <!-- Ears -->
  <polygon points='130,110 110,50 160,90' fill='#FF8C00'/>
  <polygon points='270,110 290,50 240,90' fill='#FF8C00'/>

  <!-- Eyes -->
  <ellipse cx='170' cy='130' rx='15' ry='20' fill='#90EE90' stroke='black' stroke-width='2'/>
  <ellipse cx='230' cy='130' rx='15' ry='20' fill='#90EE90' stroke='black' stroke-width='2'/>

  <!-- Pupils (vertical slits) -->
  <ellipse cx='170' cy='130' rx='4' ry='12' fill='black'/>
  <ellipse cx='230' cy='130' rx='4' ry='12' fill='black'/>

  <!-- Nose -->
  <ellipse cx='200' cy='160' rx='8' ry='5' fill='#FF69B4'/>

  <!-- Whiskers -->
  <line x1='120' y1='155' x2='165' y2='160' stroke='#666' stroke-width='1.5'/>
  <line x1='120' y1='165' x2='165' y2='165' stroke='#666' stroke-width='1.5'/>
  <line x1='235' y1='160' x2='280' y2='155' stroke='#666' stroke-width='1.5'/>
  <line x1='235' y1='165' x2='280' y2='165' stroke='#666' stroke-width='1.5'/>

  <!-- Mouth -->
  <path d='M 190 170 Q 200 180 210 170' stroke='#FF8C00' stroke-width='2' fill='none'/>

  <!-- Legs -->
  <ellipse cx='150' cy='310' rx='20' ry='30' fill='#FFB347' stroke='#FF8C00' stroke-width='2'/>
  <ellipse cx='250' cy='310' rx='20' ry='30' fill='#FFB347' stroke='#FF8C00' stroke-width='2'/>

  <!-- Tail -->
  <path d='M 300 250 Q 340 200 320 150' stroke='#FFB347' stroke-width='20' fill='none' stroke-linecap='round'/>
</svg>

Script: generate_svg.js

Use the helper script for common subjects:

node scripts/generate_svg.js "cute puppy with big eyes" /tmp/puppy.png

The script provides templates and the LLM fills in details.

Limitations

1. Best for: cartoons, icons, simple illustrations, stylized art
2. Not ideal for: photorealistic images, complex scenes, detailed textures
3. Works well with: animals, characters, objects, simple backgrounds

Tips for Better Results

1. Start simple - Basic shapes first, add details after
2. Use layers - Background → body → head → features → highlights
3. Add character - Big eyes, blush, expressive features
4. Keep proportions - Cute style = big head, small body
5. Test incrementally - Generate, check, adjust