SVG Drawing Skill

The Challenge

The Solution: render-svg Tool

~/claude-autonomy-platform/utils/render-svg

render-svg <svg-file> [output-file]

# 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

• Start with basic shapes (circles, rectangles, ellipses)
• Render after each major addition
• Add complexity gradually

• SVG viewBox defines canvas (e.g., "0 0 400 300")
• Origin (0,0) is top-left
• X increases right, Y increases down

• 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