SVG Draw

Create SVG images and convert them to PNG without external graphics libraries. Use when you need to generate custom illustrations, avatars, or artwork (e.g., "draw a dragon", "create an avatar", "make a logo") or convert SVG files to PNG format. This skill works by writing SVG text directly (no PIL/ImageMagick required) and uses system rsvg-convert for PNG conversion.

Generate vector graphics and raster images using pure SVG code and system conversion tools.

Quick Start

For new drawings:

1. Write SVG code directly to a file (use templates in assets/ as starting points)
2. Convert to PNG using the conversion script
3. Send via the appropriate channel (DingTalk, Telegram, etc.)

For existing SVG files:

1. Use the conversion script to convert SVG → PNG
2. Share the resulting image

Creating SVG Images

Basic Workflow

1. Choose or create a template

   • Check assets/ for existing templates (dragon, lobster, etc.)
   • Or write SVG from scratch

2. Write the SVG file

   # Example: Write SVG to file
   write('/path/to/output.svg', svg_content)
   

3. Convert to PNG

   /root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh input.svg output.png 400 400
   

SVG Structure Tips

Always include:

• <svg> tag with xmlns="http://www.w3.org/2000/svg" and viewBox
• Background <rect> (prevents transparent backgrounds)
• Appropriate width and height attributes

Common SVG elements:

• Shapes: <rect>, <circle>, <ellipse>, <polygon>, <path>
• Text: <text> with text-anchor="middle" for centering
• Colors: Use hex codes or named colors
• Opacity: Add opacity attribute for transparency effects

Example character structure:

Background → Body → Head → Face features → Limbs → Accessories → Name

Converting SVG to PNG

Use the bundled conversion script:

/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh <input.svg> <output.png> [width] [height]

Parameters:

• input.svg: Source SVG file path
• output.png: Destination PNG file path
• width: Output width in pixels (default: 400)
• height: Output height in pixels (default: 400)

Example:

/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh dragon.svg dragon.png 512 512

Available Templates

Dragon Template (assets/dragon_template.svg)

Blue dragon with:

• Serpentine body with wings
• Golden eyes with highlights
• Horns and pointed ears
• Curved tail
• Magical sparkles
• Name label: "大龙 🐉"

Customization ideas:

• Change fill="#4a90d9" for different body colors
• Adjust eye color by modifying fill="#ffcc00"
• Add/remove features (scales, fire, etc.)
• Change background color

Lobster Template (assets/lobster_template.svg)

Red lobster with:

• Orange-red shell with segments
• Large claws (left and right)
• Eight walking legs
• Eyes on stalks
• Long antennae
• Tail fan
• Ocean bubbles background
• Name label: "大龙虾 🦞"

Customization ideas:

• Adjust shell color: fill="#e85d04" (darker red) or fill="#f48c06" (orange)
• Change claw size or position
• Add more bubbles
• Modify background

Design Guidelines

Color Palettes

Friendly/Cute:

• Body: #4a90d9 (blue), #f48c06 (orange)
• Accents: #ffcc00 (yellow), #ff6b6b (coral)
• Background: #1a1a2e (dark blue)

Professional:

• Use muted tones
• Stick to 2-3 main colors
• Add subtle gradients if needed

Character Design Principles

1. Keep it simple — Too many details look messy at small sizes
2. Use contrast — Light features on dark backgrounds
3. Add personality — Eyes, expressions, small details
4. Include a label — Add name/title at the bottom for context
5. Test at target size — View at 400x400 to check readability

Common Tasks

Creating an Avatar

1. Start with a template that matches the vibe (dragon, lobster, etc.)
2. Modify colors and features
3. Add personal touches (accessories, expressions)
4. Add name label at bottom
5. Convert and send

Making a Logo

1. Use simple geometric shapes
2. Limit to 2-3 colors
3. Consider scalable design
4. Test at multiple sizes
5. Export at higher resolution (800x800 or 1024x1024)

Customizing Templates

Change colors: Find fill="#" or stroke="#" attributes and replace the hex codes

Resize elements: Adjust rx, ry (ellipses) or width, height (rectangles)

Reposition: Modify cx, cy (circles/ellipses) or x, y (rectangles)

Add text:

<text x="200" y="370" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#ffcc00" text-anchor="middle">Your Text</text>

Resources

scripts/

• svg_to_png.sh - Convert SVG to PNG using rsvg-convert

assets/

• dragon_template.svg - Friendly blue dragon
• lobster_template.svg - Cute red lobster

Troubleshooting

SVG not rendering:

• Check for proper <svg> tag with xmlns attribute
• Ensure viewBox is set correctly
• Verify all tags are closed

Conversion fails:

• Confirm rsvg-convert is installed: which rsvg-convert
• Check file paths are correct
• Verify SVG syntax is valid

Image looks wrong:

• Test SVG in browser first
• Check coordinate system (viewBox vs width/height)
• Verify element stacking order (later elements draw on top)