SVG Canvas

You run an MCP server that lets you generate and manipulate SVG canvases with a rich set of drawing, styling, animation, and export features. It supports layers, object manipulation, templates, AI-assisted design, and even blog-related presets, all accessible through a lightweight MCP interface you can drive with an MCP client.

How to use

You interact with the SVG Canvas MCP server by sending commands through your MCP client. Create or open a canvas, draw shapes and paths, apply fills, strokes, gradients, and filters, arrange objects in layers, and save or export your work as SVG, PNG, or Data URI. You can build complex visuals by combining shapes, text, images, and paths, then animate or export ready-to-use assets for the web or social platforms. The server also provides helper features like color palette suggestions, layout recommendations, and automated object alignment to speed up your design process.

How to install

Prerequisites you need before starting are Node.js and npm. Ensure Node.js is installed and available in your system PATH.

# 1) Install dependencies
npm install

# 2) Build the MCP server bundle
npm run build

# 3) Start the MCP server (via the provided stdio configuration)
# See the configuration step for how to run from your MCP client.

Configuration and startup (stdio MCP)

The server is configured to run as a local, stdio-based MCP endpoint. The runtime command points to the built index inside the project so your MCP client can attach to it directly.

{
  "mcpServers": {
    "svg_canvas": {
      "command": "node",
      "args": ["/path/to/svg-canvas-mcp/build/index.js"]
    }
  }
}

Enable the MCP server in your client

Create a local MCP configuration file at your project root or in your user directory to register the server. Then enable this MCP server in your client’s local settings so it becomes active for use.

{
  "enabledMcpjsonServers": ["svg_canvas"]
}

Available tools

svg_create

Create a new canvas with a chosen size and properties.

svg_open

Open an existing SVG file into the canvas for editing.

svg_save

Save the current canvas to a file.

svg_info

Query information about the current canvas, including size, layers, and objects.

svg_resize

Change the canvas dimensions.

draw_rect

Draw a rectangle with specified position, size, and styling.

draw_circle

Draw a circle with center and radius, including fill and stroke.

draw_ellipse

Draw an ellipse with radii and orientation.

draw_line

Draw a straight line between two points.

draw_polyline

Draw a series of connected straight lines.

draw_polygon

Draw a closed polygon with multiple points.

draw_text

Insert styled text with fonts, size, and alignment.

draw_image

Insert an image into the canvas.

draw_path

Create or modify an SVG path with precise commands.

draw_regular_polygon

Draw a regular polygon (e.g., hexagon, octagon) with a given radius.

draw_star

Draw a star shape with configurable points and radii.

draw_heart

Draw a heart shape with scalable size and styling.

draw_rounded_rect_path

Create a rounded-rectangle path for smooth corners.

path_create

Begin a new SVG path for complex shapes.

path_lineto

Add a straight segment to the current path.

path_curveto

Add a cubic Bezier curve to the path.

path_arcto

Add an arc segment to the path.

path_close

Close the current path.

path_finish

Finish the path construction.

path_cancel

Cancel the current path operation.

layer_create

Create a new layer in the canvas.

layer_delete

Delete an existing layer.

layer_rename

Rename a layer.

layer_reorder

Change the stacking order of layers.

layer_visibility

Show or hide a layer.

layer_lock

Lock or unlock a layer.

layer_opacity

Adjust the opacity of a layer.

layer_blend_mode

Set a blending mode for a layer.

layer_list

List all layers in the canvas.

layer_select

Select a specific layer for editing.

layer_merge

Merge layers into a single layer.

layer_duplicate

Duplicate a layer.

object_select

Select a specific object on the canvas.

object_list

List all objects currently on the canvas.

object_move

Move an object to a new position.

object_scale

Scale an object proportionally or non-proportionally.

object_rotate

Rotate an object around a pivot point.

object_delete

Remove an object from the canvas.

object_duplicate

Create a copy of an object.

object_group

Group multiple objects together.

object_ungroup

Ungroup a previously grouped set of objects.

object_order

Change the Z-order of objects.

style_fill

Set the fill color or pattern for an object.

style_stroke

Configure the stroke color, width, and style.

style_opacity

Adjust opacity of fill and stroke.

style_gradient

Define linear or radial gradients.

style_pattern

Apply a pattern fill to an object.

style_filter

Apply visual filters like blur or shadow.

style_remove_filter

Remove applied filters.

anim_css_add

Add CSS-based animations to elements.

anim_smil_add

Add SMIL animations for timed effects.

anim_remove

Remove an animation from an element.

anim_list

List all animations on the canvas.

symbol_define

Define a reusable symbol.

symbol_use

Place an instance of a symbol on the canvas.

template_save

Save the current canvas as a reusable template.

template_load

Load a saved template into the canvas.

template_list

List all saved templates.

template_delete

Delete a saved template.

history_undo

Undo the last action.

history_redo

Redo the last undone action.

history_list

List the history timeline of actions.

history_goto

Jump to a specific point in the action history.

history_clear

Clear the action history.

export_svg

Export the current canvas as an SVG file.

export_png

Export the current canvas as a PNG image.

export_data_uri

Export the current canvas as a Data URI.

export_code

Return the SVG code for the current canvas.

preview_browser

Open a browser preview of the canvas.

ai_suggest_colors

Suggest a color palette based on the canvas content.

ai_analyze_colors

Analyze and summarize dominant colors.

ai_align_objects

Suggest alignment adjustments for objects.

ai_suggest_layout

Provide layout recommendations based on content.

preset_list

List available OG presets for platforms and themes.

preset_create_og

Create an OG image for a platform using a preset.

preset_create_thumbnail

Create a simple thumbnail from the canvas.

chart_bar

Render a 2D bar chart with data.

chart_line

Render a 2D line chart with data.

chart_pie

Render a 2D pie chart.

chart_donut

Render a 2D donut chart.

chart_3d_bar

Render a 3D-style bar chart.

chart_3d_pie

Render a 3D-style pie chart.

chart_3d_pyramid

Render a 3D pyramid chart.

diagram_flowchart

Create a flowchart diagram.

diagram_mindmap

Create a mind map diagram.

diagram_sequence

Create a sequence diagram.

diagram_isometric

Create an isometric diagram.

diagram_3d_architecture

Create a 3D architecture diagram.

qrcode_generate

Generate a QR code as SVG.

qrcode_batch

Generate multiple QR codes in a batch.

watermark_text

Apply a text watermark to the artwork.

watermark_image

Apply an image watermark to the artwork.

watermark_copyright

Apply a copyright watermark.

watermark_diagonal

Apply a diagonal repeating watermark.

watermark_remove

Remove an existing watermark.

trace_image

Trace a bitmap image to a grayscale vector path.

trace_color

Trace a color bitmap to a multi-color vector.

trace_outline

Extract only the outer outline of objects.

trace_silhouette

Extract solid silhouette shapes.