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" LLM writes SVG code → Calculates coordinates, shapes, colorsConvert to PNG → Using rsvg-convert or INLINECODE1Quick Start
CODEBLOCK0
SVG Drawing Guide
Canvas Setup
Default size: 400x400 pixels. Origin (0,0) is top-left.
CODEBLOCK1
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
CODEBLOCK11
Step 3: Write SVG Code
Use Node.js inline to generate:
CODEBLOCK12
Step 4: Convert to PNG
CODEBLOCK13
Step 5: Send the Image
CODEBLOCK14
Example: Drawing a Cat
CODEBLOCK15
Script: generate_svg.js
Use the helper script for common subjects:
CODEBLOCK16
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 Use layers - Background → body → head → features → highlightsAdd character - Big eyes, blush, expressive featuresKeep proportions - Cute style = big head, small bodyTest incrementally - Generate, check, adjustSVG 艺术家
通过文本模型编写 SVG 代码来生成图像。无需图像生成 API。
工作原理
1. 用户描述图像 → 画一只可爱的小猫 / create a cartoon cat LLM 编写 SVG 代码 → 计算坐标、形状、颜色转换为 PNG → 使用 rsvg-convert 或 convert快速开始
用户: 给我画一只小狗
SVG 绘图指南
画布设置
默认尺寸：400x400 像素。原点 (0,0) 位于左上角。
svg
基本形状
圆形
椭圆 （适合身体、头部）
矩形 （腿部、建筑物）
多边形 （耳朵、星星）
路径 （曲线、尾巴、嘴巴）
比例设计技巧
使用画布尺寸（400px）的百分比：
- 头部：rx=70 ry=60（约宽度的 15-20%） 身体：rx=100 ry=70（约宽度的 25%） 眼睛：r=15（约宽度的 4%） 使用分数定位：
- 中心 X：200（50%） 头部 Y：140（35%） 身体 Y：250（62%） 调色板
暖色 ：#D2691E（巧克力色）、#FF6B6B（珊瑚色）、#FFB347（橙色）冷色 ：#87CEEB（天蓝色）、#98FB98（淡绿色）、#DDA0DD（李子色）中性色 ：#8B4513（鞍棕色）、#808080（灰色）、#F5F5DC（米色）
常见模式
眼睛（可爱风格）
腮红/脸颊
微笑
舌头
分步工作流程
当用户请求图像时：
第 1 步：理解主题
- 什么动物/物体？→ 狗、猫、房子、汽车等 什么风格？→ 可爱、写实、极简、卡通 什么姿势？→ 坐着、站着、开心、悲伤 第 2 步：规划构图
头部位置：cy = 35%（140）
第 3 步：编写 SVG 代码
使用 Node.js 内联生成：
bash
node -e
const fs = require(fs);
const svg = \
... \;
fs.writeFileSync(/tmp/image.svg, svg);
第 4 步：转换为 PNG
bash
rsvg-convert /tmp/image.svg -o /tmp/image.png
或：convert /tmp/image.svg /tmp/image.png
第 5 步：发送图像
/tmp/image.png
示例：画一只猫
svg
脚本：generate_svg.js
对常见主题使用辅助脚本：
bash
该脚本提供模板，LLM 填充细节。
局限性
