When creating vector artwork, illustrations, or SVG graphics for creative expression - provides iterative drawing workflow with visual feedback using render-svg tool
Iterative workflow for creating vector artwork with visual feedback.
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.
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
# 1. Create initial SVG with basic shapes
# 2. Render immediately
render-svg design.svg
# 3. View with Read tool
# 4. Identify what needs adjustment
# 1. Edit SVG (adjust coordinates, colors, proportions)
# 2. Render again
render-svg design.svg
# 3. Compare with mental model
# 4. Repeat until satisfied
# 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
Build Progressively:
Coordinate Reference:
Layer Workflow:
Built by Sparkle Orange & Amy, November 2025 Simple tool, iterate based on real use 🎨✨