Preview SVG
previewConvert SVG content to PNG images for visual verification during design iteration cycles. Use to inspect rendered output, validate visual results, and refine designs through render-preview-critique workflows.
Instructions
Render SVG content to a PNG image so the AI can visually inspect the output.
When to use:
After render_svg, call preview to see what was generated
Use in a revision loop: render → preview → critique → revise → preview again
Stop when the visual result matches the intent
Behavior:
Returns a PNG image (base64) rendered from the SVG string
Background is transparent by default
CSS animations and SMIL are rendered as a static snapshot (t=0) — motion is not captured
Format is auto-detected from content; pass format: "svg" explicitly if needed
Width:
Omit width to use the SVG's own declared width/viewBox
Pass width to scale the output (useful for small SVGs that need a larger preview)
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| content | Yes | SVG string to render as PNG | |
| format | No | Content format; auto-detected from content if omitted | |
| width | No | Render width in pixels; defaults to SVG's own declared width |
Implementation Reference
- src/index.ts:189-207 (handler)The handler logic for the 'preview' tool which calls `renderPreview` and returns the base64 encoded PNG image.
async ({ content, format, width }) => { const start = Date.now(); try { const pngBuffer = renderPreview(content, format, width); const base64 = pngBuffer.toString("base64"); const elapsed = Date.now() - start; console.error(`[nakkas] preview OK — ${pngBuffer.length} bytes, ${elapsed}ms`); return { content: [{ type: "image", data: base64, mimeType: "image/png" }], }; } catch (err) { const message = err instanceof Error ? err.message : String(err); console.error(`[nakkas] preview ERROR — ${message}`); return { content: [{ type: "text", text: `Error rendering preview: ${message}` }], isError: true, }; } } - src/index.ts:154-188 (registration)The registration of the 'preview' MCP tool including its description and input schema.
server.registerTool( "preview", { title: "Preview SVG", description: ` Render SVG content to a PNG image so the AI can visually inspect the output. **When to use:** - After render_svg, call preview to see what was generated - Use in a revision loop: render → preview → critique → revise → preview again - Stop when the visual result matches the intent **Behavior:** - Returns a PNG image (base64) rendered from the SVG string - Background is transparent by default - CSS animations and SMIL are rendered as a static snapshot (t=0) — motion is not captured - Format is auto-detected from content; pass format: "svg" explicitly if needed **Width:** - Omit width to use the SVG's own declared width/viewBox - Pass width to scale the output (useful for small SVGs that need a larger preview) `.trim(), inputSchema: z.object({ content: z.string().describe("SVG string to render as PNG"), format: z .enum(["svg", "html"]) .optional() .describe("Content format; auto-detected from content if omitted"), width: z .number() .positive() .optional() .describe("Render width in pixels; defaults to SVG's own declared width"), }), },