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 pathoutput.png
: Destination PNG file pathwidth
: 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="#"
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 dragonlobster_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)
