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

- **Type:** Skill
- **Install:** `agentstack add skill-baizeagent-baize-svg-draw`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [BaiZeAgent](https://agentstack.voostack.com/s/baizeagent)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [BaiZeAgent](https://github.com/BaiZeAgent)
- **Source:** https://github.com/BaiZeAgent/Baize/tree/main/skills/svg-draw

## Install

```sh
agentstack add skill-baizeagent-baize-svg-draw
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:**
- `` tag with `xmlns="http://www.w3.org/2000/svg"` and `viewBox`
- Background `` (prevents transparent backgrounds)
- Appropriate `width` and `height` attributes

**Common SVG elements:**
- Shapes: ``, ``, ``, ``, ``
- 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   [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

### 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:**
```xml
Your 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 `` 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)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [BaiZeAgent](https://github.com/BaiZeAgent)
- **Source:** [BaiZeAgent/Baize](https://github.com/BaiZeAgent/Baize)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-baizeagent-baize-svg-draw
- Seller: https://agentstack.voostack.com/s/baizeagent
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.