SVG Draw

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 ```bash

   Example: Write SVG to file

   write('/path/to/output.svg', svg_content) ```

3. Convert to PNG bash /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)