SVG Draw

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

Quick Start

For new drawings:

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

For existing SVG files:

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

Creating SVG Images

Basic Workflow

Choose or create a template
- Check
```
assets/
```
  for existing templates (dragon, lobster, etc.)
- Or write SVG from scratch

Write the SVG file

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

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

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

Common Tasks

Creating an Avatar

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

Making a Logo

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

Customizing Templates

Change colors: Find

fill="#"

stroke="#"

attributes and replace the hex codes

Resize elements: Adjust

rx

ry

(ellipses) or

width

height

(rectangles)

Reposition: Modify

cx

cy

(circles/ellipses) or

(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)

SVG Draw

AI Skill Market Insights

Be Part of the 0+ Developer Community

SVG Draw

Quick Start

Creating SVG Images

Basic Workflow

SVG Structure Tips

Converting SVG to PNG

Available Templates

Dragon Template (
`assets/dragon_template.svg`
)

Lobster Template (
`assets/lobster_template.svg`
)

Design Guidelines

Color Palettes

Character Design Principles

Common Tasks

Creating an Avatar

Making a Logo

Customizing Templates

Resources

scripts/

assets/

Troubleshooting

Quick Start

Manual Installation

TEAR & SHARE

Tags

Brand Guidelines

Theme Factory

Agent-first Marketing Image Generation

🗣️ Text-to-speech using GLM-TTS for generating audio

AI Content Repurposing Machine — Turn 1 Piece of Content Into 50 Assets in 30 Minutes

Channels

Learn

Compare

Company

SVG Draw

AI Skill Market Insights

Be Part of the 0+ Developer Community

SVG Draw

Quick Start

Creating SVG Images

Basic Workflow

SVG Structure Tips

Converting SVG to PNG

Available Templates

Dragon Template (assets/dragon_template.svg)

Lobster Template (assets/lobster_template.svg)

Design Guidelines

Color Palettes

Character Design Principles

Common Tasks

Creating an Avatar

Making a Logo

Customizing Templates

Resources

scripts/

assets/

Troubleshooting

Quick Start

Manual Installation

TEAR & SHARE

Tags

Channels

Learn

Compare

Company

Dragon Template (
`assets/dragon_template.svg`
)

Lobster Template (
`assets/lobster_template.svg`
)