Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· AI
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.
skill openclawclawhub Free
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.
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, assets/dragon_template.svg, assets/lobster_template.svg, scripts/svg_to_png.sh
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- LiJY2015
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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
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
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
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
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>
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)
Category context
Agent frameworks, memory systems, reasoning layers, and model-native orchestration.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Assets1 Docs1 Scripts
- SKILL.md
- scripts/svg_to_png.sh
- assets/dragon_template.svg
- assets/lobster_template.svg