{ "schemaVersion": "1.0", "item": { "slug": "svg-draw", "name": "SVG Draw", "source": "tencent", "type": "skill", "category": "AI 智能", "sourceUrl": "https://clawhub.ai/LiJY2015/svg-draw", "canonicalUrl": "https://clawhub.ai/LiJY2015/svg-draw", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/svg-draw", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=svg-draw", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md", "assets/dragon_template.svg", "assets/lobster_template.svg", "scripts/svg_to_png.sh" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/svg-draw" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/svg-draw", "agentPageUrl": "https://openagent3.xyz/skills/svg-draw/agent", "manifestUrl": "https://openagent3.xyz/skills/svg-draw/agent.json", "briefUrl": "https://openagent3.xyz/skills/svg-draw/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "SVG Draw", "body": "Generate vector graphics and raster images using pure SVG code and system conversion tools." }, { "title": "Quick Start", "body": "For new drawings:\n\nWrite SVG code directly to a file (use templates in assets/ as starting points)\nConvert to PNG using the conversion script\nSend via the appropriate channel (DingTalk, Telegram, etc.)\n\nFor existing SVG files:\n\nUse the conversion script to convert SVG → PNG\nShare the resulting image" }, { "title": "Basic Workflow", "body": "Choose or create a template\n\nCheck assets/ for existing templates (dragon, lobster, etc.)\nOr write SVG from scratch\n\n\n\nWrite the SVG file\n# Example: Write SVG to file\nwrite('/path/to/output.svg', svg_content)\n\n\n\nConvert to PNG\n/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh input.svg output.png 400 400" }, { "title": "SVG Structure Tips", "body": "Always include:\n\n tag with xmlns=\"http://www.w3.org/2000/svg\" and viewBox\nBackground (prevents transparent backgrounds)\nAppropriate width and height attributes\n\nCommon SVG elements:\n\nShapes: , , , , \nText: with text-anchor=\"middle\" for centering\nColors: Use hex codes or named colors\nOpacity: Add opacity attribute for transparency effects\n\nExample character structure:\n\nBackground → Body → Head → Face features → Limbs → Accessories → Name" }, { "title": "Converting SVG to PNG", "body": "Use the bundled conversion script:\n\n/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh [width] [height]\n\nParameters:\n\ninput.svg: Source SVG file path\noutput.png: Destination PNG file path\nwidth: Output width in pixels (default: 400)\nheight: Output height in pixels (default: 400)\n\nExample:\n\n/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh dragon.svg dragon.png 512 512" }, { "title": "Dragon Template (assets/dragon_template.svg)", "body": "Blue dragon with:\n\nSerpentine body with wings\nGolden eyes with highlights\nHorns and pointed ears\nCurved tail\nMagical sparkles\nName label: \"大龙 🐉\"\n\nCustomization ideas:\n\nChange fill=\"#4a90d9\" for different body colors\nAdjust eye color by modifying fill=\"#ffcc00\"\nAdd/remove features (scales, fire, etc.)\nChange background color" }, { "title": "Lobster Template (assets/lobster_template.svg)", "body": "Red lobster with:\n\nOrange-red shell with segments\nLarge claws (left and right)\nEight walking legs\nEyes on stalks\nLong antennae\nTail fan\nOcean bubbles background\nName label: \"大龙虾 🦞\"\n\nCustomization ideas:\n\nAdjust shell color: fill=\"#e85d04\" (darker red) or fill=\"#f48c06\" (orange)\nChange claw size or position\nAdd more bubbles\nModify background" }, { "title": "Color Palettes", "body": "Friendly/Cute:\n\nBody: #4a90d9 (blue), #f48c06 (orange)\nAccents: #ffcc00 (yellow), #ff6b6b (coral)\nBackground: #1a1a2e (dark blue)\n\nProfessional:\n\nUse muted tones\nStick to 2-3 main colors\nAdd subtle gradients if needed" }, { "title": "Character Design Principles", "body": "Keep it simple — Too many details look messy at small sizes\nUse contrast — Light features on dark backgrounds\nAdd personality — Eyes, expressions, small details\nInclude a label — Add name/title at the bottom for context\nTest at target size — View at 400x400 to check readability" }, { "title": "Creating an Avatar", "body": "Start with a template that matches the vibe (dragon, lobster, etc.)\nModify colors and features\nAdd personal touches (accessories, expressions)\nAdd name label at bottom\nConvert and send" }, { "title": "Making a Logo", "body": "Use simple geometric shapes\nLimit to 2-3 colors\nConsider scalable design\nTest at multiple sizes\nExport at higher resolution (800x800 or 1024x1024)" }, { "title": "Customizing Templates", "body": "Change colors: Find fill=\"#\" or stroke=\"#\" attributes and replace the hex codes\n\nResize elements: Adjust rx, ry (ellipses) or width, height (rectangles)\n\nReposition: Modify cx, cy (circles/ellipses) or x, y (rectangles)\n\nAdd text:\n\nYour Text" }, { "title": "scripts/", "body": "svg_to_png.sh - Convert SVG to PNG using rsvg-convert" }, { "title": "assets/", "body": "dragon_template.svg - Friendly blue dragon\nlobster_template.svg - Cute red lobster" }, { "title": "Troubleshooting", "body": "SVG not rendering:\n\nCheck for proper tag with xmlns attribute\nEnsure viewBox is set correctly\nVerify all tags are closed\n\nConversion fails:\n\nConfirm rsvg-convert is installed: which rsvg-convert\nCheck file paths are correct\nVerify SVG syntax is valid\n\nImage looks wrong:\n\nTest SVG in browser first\nCheck coordinate system (viewBox vs width/height)\nVerify element stacking order (later elements draw on top)" } ], "body": "SVG Draw\n\nGenerate vector graphics and raster images using pure SVG code and system conversion tools.\n\nQuick Start\n\nFor new drawings:\n\nWrite SVG code directly to a file (use templates in assets/ as starting points)\nConvert to PNG using the conversion script\nSend via the appropriate channel (DingTalk, Telegram, etc.)\n\nFor existing SVG files:\n\nUse the conversion script to convert SVG → PNG\nShare the resulting image\nCreating SVG Images\nBasic Workflow\n\nChoose or create a template\n\nCheck assets/ for existing templates (dragon, lobster, etc.)\nOr write SVG from scratch\n\nWrite the SVG file\n\n# Example: Write SVG to file\nwrite('/path/to/output.svg', svg_content)\n\n\nConvert to PNG\n\n/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh input.svg output.png 400 400\n\nSVG Structure Tips\n\nAlways include:\n\n tag with xmlns=\"http://www.w3.org/2000/svg\" and viewBox\nBackground (prevents transparent backgrounds)\nAppropriate width and height attributes\n\nCommon SVG elements:\n\nShapes: , , , , \nText: with text-anchor=\"middle\" for centering\nColors: Use hex codes or named colors\nOpacity: Add opacity attribute for transparency effects\n\nExample character structure:\n\nBackground → Body → Head → Face features → Limbs → Accessories → Name\n\nConverting SVG to PNG\n\nUse the bundled conversion script:\n\n/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh [width] [height]\n\n\nParameters:\n\ninput.svg: Source SVG file path\noutput.png: Destination PNG file path\nwidth: Output width in pixels (default: 400)\nheight: Output height in pixels (default: 400)\n\nExample:\n\n/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh dragon.svg dragon.png 512 512\n\nAvailable Templates\nDragon Template (assets/dragon_template.svg)\n\nBlue dragon with:\n\nSerpentine body with wings\nGolden eyes with highlights\nHorns and pointed ears\nCurved tail\nMagical sparkles\nName label: \"大龙 🐉\"\n\nCustomization ideas:\n\nChange fill=\"#4a90d9\" for different body colors\nAdjust eye color by modifying fill=\"#ffcc00\"\nAdd/remove features (scales, fire, etc.)\nChange background color\nLobster Template (assets/lobster_template.svg)\n\nRed lobster with:\n\nOrange-red shell with segments\nLarge claws (left and right)\nEight walking legs\nEyes on stalks\nLong antennae\nTail fan\nOcean bubbles background\nName label: \"大龙虾 🦞\"\n\nCustomization ideas:\n\nAdjust shell color: fill=\"#e85d04\" (darker red) or fill=\"#f48c06\" (orange)\nChange claw size or position\nAdd more bubbles\nModify background\nDesign Guidelines\nColor Palettes\n\nFriendly/Cute:\n\nBody: #4a90d9 (blue), #f48c06 (orange)\nAccents: #ffcc00 (yellow), #ff6b6b (coral)\nBackground: #1a1a2e (dark blue)\n\nProfessional:\n\nUse muted tones\nStick to 2-3 main colors\nAdd subtle gradients if needed\nCharacter Design Principles\nKeep it simple — Too many details look messy at small sizes\nUse contrast — Light features on dark backgrounds\nAdd personality — Eyes, expressions, small details\nInclude a label — Add name/title at the bottom for context\nTest at target size — View at 400x400 to check readability\nCommon Tasks\nCreating an Avatar\nStart with a template that matches the vibe (dragon, lobster, etc.)\nModify colors and features\nAdd personal touches (accessories, expressions)\nAdd name label at bottom\nConvert and send\nMaking a Logo\nUse simple geometric shapes\nLimit to 2-3 colors\nConsider scalable design\nTest at multiple sizes\nExport at higher resolution (800x800 or 1024x1024)\nCustomizing Templates\n\nChange colors: Find fill=\"#\" or stroke=\"#\" attributes and replace the hex codes\n\nResize elements: Adjust rx, ry (ellipses) or width, height (rectangles)\n\nReposition: Modify cx, cy (circles/ellipses) or x, y (rectangles)\n\nAdd text:\n\nYour Text\n\nResources\nscripts/\nsvg_to_png.sh - Convert SVG to PNG using rsvg-convert\nassets/\ndragon_template.svg - Friendly blue dragon\nlobster_template.svg - Cute red lobster\nTroubleshooting\n\nSVG not rendering:\n\nCheck for proper tag with xmlns attribute\nEnsure viewBox is set correctly\nVerify all tags are closed\n\nConversion fails:\n\nConfirm rsvg-convert is installed: which rsvg-convert\nCheck file paths are correct\nVerify SVG syntax is valid\n\nImage looks wrong:\n\nTest SVG in browser first\nCheck coordinate system (viewBox vs width/height)\nVerify element stacking order (later elements draw on top)" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/LiJY2015/svg-draw", "publisherUrl": "https://clawhub.ai/LiJY2015/svg-draw", "owner": "LiJY2015", "version": "1.0.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/svg-draw", "downloadUrl": "https://openagent3.xyz/downloads/svg-draw", "agentUrl": "https://openagent3.xyz/skills/svg-draw/agent", "manifestUrl": "https://openagent3.xyz/skills/svg-draw/agent.json", "briefUrl": "https://openagent3.xyz/skills/svg-draw/agent.md" } }