mcpField
_
_svg-drawing

_svg-drawing

github.com/possumworxCreative & media4110 installsUpdated 16w ago
Repository

About _svg-drawing

A skill for creating SVG vector artwork through repeated rendering and visual review. It is intended for people authoring SVG code and uses the `render-svg` command to produce PNG previews for iteration and comparison.

Key features

  1. 01Renders SVG files as PNG previews
  2. 02Supports repeated edit-and-render cycles
  3. 03Allows custom output paths
  4. 04Enables comparison of saved iterations
  5. 05Provides coordinate and layering guidance

Use cases

  1. 01Checking SVG layout while drawing
  2. 02Refining shapes, colors, and proportions
  3. 03Comparing successive artwork versions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/possumworx/claude-autonomy-platform --skill _svg-drawing

After installing, type/_svg-drawingin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported