SVG Canvas MCP is a Model Context Protocol server that enables Photoshop-level SVG graphic creation within Claude Code, offering comprehensive tools for vector graphics design.

Core Features:

• Canvas Management: Create, open, save, resize (up to 10000x10000px), set backgrounds, and configure viewBox/aspect ratio properties

• Drawing Tools: Basic shapes (rectangles, circles, ellipses, lines, polygons), advanced shapes (stars, hearts, rounded rectangles, regular polygons), text insertion, image embedding, and complex paths with Bézier curves and arcs via path builder

• Layer System: Create, delete, rename, reorder, merge, and duplicate layers with visibility, lock, opacity, and blend mode controls

• Object Manipulation: Select, move, scale, rotate, duplicate, delete, group/ungroup objects, and control Z-order

• Styling & Effects: Apply fills, strokes (color, width, linecap, linejoin, dasharray), opacity, linear/radial gradients with color stops, patterns, and filters (blur, drop-shadow, brightness, grayscale)

• Animation: Add CSS keyframe or SMIL animations with control over duration, delay, iteration, and direction

• Symbols & Templates: Define reusable symbols, instantiate with custom styling, and save/load/search templates with categories and tags

• History Management: Full undo/redo support (multi-step), view history, jump to specific states, and clear history

• Export Options: Export as SVG (raw, pretty, or minified), PNG (with scale/background options), Data URI, or get SVG code; browser preview integration

AI-Powered Features:

• Color palette suggestions (complementary, triadic, analogous)

• Canvas color analysis

• Smart object alignment (grid, circle, horizontal/vertical patterns)

• Layout recommendations based on content type

Blog & Content Creation Tools:

• OG Images: Generate platform-specific Open Graph images (10 platforms including Twitter, YouTube, Instagram; 6 themes)

• Charts: Create 2D/3D bar, line, pie, donut, and pyramid charts

• Diagrams: Generate flowcharts, mind maps, sequence diagrams, isometric diagrams, and 3D architecture diagrams

• QR Codes: Generate pure SVG-based QR codes (single or batch)

• Watermarks: Add text, image, copyright, or diagonal repeating pattern watermarks

Image Tracing: Convert bitmap images to vector paths (using potrace) with support for black & white, multi-color, outline, and silhouette extraction

Supports the creation and management of CSS keyframe animations to create dynamic and animated SVG elements.

Provides comprehensive tools for creating and manipulating professional-grade SVG graphics, including shape drawing, complex path building, layer management, and styling with filters and gradients.

1. Click on "Install Server".

2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.

3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@SVG Canvas MCP Create a 1200x630 thumbnail with a blue gradient background and a rotating star"

That's it! The server will respond to your query, and you can continue using it as needed.

Here is a step-by-step guide with screenshots.