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 🎨✨