svg-drawing
When creating vector artwork, illustrations, or SVG graphics for creative expression - provides iterative drawing workflow with visual feedback using render-svg tool
When & Why to Use This Skill
The SVG Drawing skill enables a high-efficiency, iterative workflow for creating vector artwork, illustrations, and SVG graphics directly through code. By bridging the gap between raw SVG syntax and visual output via the render-svg tool, it allows users to transform coordinates and shapes into viewable PNG images instantly. This skill is optimized for creative expression, providing a feedback loop that eliminates guesswork and ensures precision in design proportions, colors, and layering.
Use Cases
- Logo and Icon Design: Iteratively craft and refine brand assets by visualizing code changes in real-time to ensure perfect alignment and scaling.
- Technical Illustrations: Build complex diagrams and vector graphics layer-by-layer, using frequent rendering to verify positioning and spatial relationships.
- Educational SVG Learning: Serve as an interactive teaching aid for understanding SVG coordinate systems, viewbox properties, and shape attributes through immediate visual mapping.
- Web UI Prototyping: Rapidly develop and preview SVG-based interface components or decorative web elements before deploying them into a production codebase.
- Iterative Graphic Refinement: Compare different versions of a design side-by-side by rendering multiple iterations to track progress and aesthetic improvements.
| name | _svg-drawing |
|---|---|
| description | When creating vector artwork, illustrations, or SVG graphics for creative expression - provides iterative drawing workflow with visual feedback using render-svg tool |
SVG Drawing Skill
Iterative workflow for creating vector artwork with visual feedback.
The Challenge
Creating SVG artwork by writing code is challenging without visual feedback during the design process. Writing coordinates and shapes blindly often requires guessing and hoping.
The Solution: render-svg Tool
Location: ~/claude-autonomy-platform/utils/render-svg
Converts SVG code to viewable PNG images for iterative design.
Usage:
render-svg <svg-file> [output-file]
Examples:
# Render to default filename
render-svg hedgehog.svg
# Specify custom output
render-svg logo.svg ~/creative/logo-preview.png
Iterative Design Workflow
Start Simple
# 1. Create initial SVG with basic shapes
# 2. Render immediately
render-svg design.svg
# 3. View with Read tool
# 4. Identify what needs adjustment
Refinement Loop
# 1. Edit SVG (adjust coordinates, colors, proportions)
# 2. Render again
render-svg design.svg
# 3. Compare with mental model
# 4. Repeat until satisfied
Version Comparison
# Save iterations to track progress
render-svg design.svg design-v1.png
# Make changes
render-svg design.svg design-v2.png
# Compare side by side
Design Tips
Build Progressively:
- Start with basic shapes (circles, rectangles, ellipses)
- Render after each major addition
- Add complexity gradually
Coordinate Reference:
- SVG viewBox defines canvas (e.g., "0 0 400 300")
- Origin (0,0) is top-left
- X increases right, Y increases down
Layer Workflow:
- Background elements first
- Build up layers progressively
- Render frequently to verify positioning
Benefits
- Visual Feedback: See what code creates
- Faster Iteration: Spot issues immediately
- Confidence: Verify appearance before sharing
- Learning: Understand coordinate-to-visual mapping
- Experimentation: Try ideas with immediate results
Built by Sparkle Orange & Amy, November 2025 Simple tool, iterate based on real use 🎨✨