svg-draw

Files (4)

• SKILL.md
• dragon_template.svg · assets/
• lobster_template.svg · assets/
• svg_to_png.sh · scripts/

SKILL.md (first lines)

# 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:

```bash
/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:**
```bash
/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

From BaiZeAgent/Baize, Apache-2.0.

More from BaiZeAgent/Baize