🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί SVG Artist
πŸ¦€ ClawHub

SVG Artist

by @juliantsaiii

Generate SVG images using text LLM instead of image generation APIs. Use when user wants to create illustrations, icons, cartoons, diagrams, or any visual co...

Versionv1.0.0
Downloads866
#clawhub
TERMINAL
clawhub install svg-artist

πŸ“– About This Skill

name: svg-artist description: Generate SVG images using text LLM instead of image generation APIs. Use when user wants to create illustrations, icons, cartoons, diagrams, or any visual content without DALL-E/Midjourney/Stable Diffusion. The LLM writes SVG code directly - works great for simple graphics, cartoons, icons, and stylized art.

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.

Basic Shapes

Circle

Ellipse (great for bodies, heads)

Rectangle (legs, buildings)

Polygon (ears, stars)

Path (curves, tails, mouths)

Proportional Design Tips

Use percentages of canvas size (400px):

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

    • Position using fractions:

  • Center X: 200 (50%)
  • Head Y: 140 (35%)
  • 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)

    Blush/cheeks

    Smile

    Tongue

    Step-by-Step Workflow

    When user asks for an image:

    Step 1: Understand the Subject

  • What animal/object? β†’ dog, cat, house, car, etc.
  • What style? β†’ cute, realistic, minimalist, cartoon
  • 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 = \...\;
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

    /tmp/image.png

    Example: Drawing a Cat

    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

  • Best for: cartoons, icons, simple illustrations, stylized art
  • Not ideal for: photorealistic images, complex scenes, detailed textures
  • 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

    πŸ’‘ Examples

    User: η»™ζˆ‘η”»δΈ€εͺ小狗
You: [Generate SVG code] β†’ Send the PNG