Render SVG
render_svgConvert JSON configuration into animated SVG graphics with CSS and SMIL animations, supporting parametric curves, pattern groups, gradients, and filters for dynamic visual design.
Instructions
Render animated SVG from JSON config. AI controls all design parameters.
Workflow: render_svg > preview > critique > revise. Iterate at least 3 times before finalizing.
Element types: rect, circle, ellipse, line, polyline, polygon, path, image, text, textPath, group, use, radial-group, arc-group, grid-group, scatter-group, path-group, parametric
Pattern groups (use for repetitive designs): radial-group (circular), arc-group (arc), grid-group (matrix), scatter-group (random), path-group (along polyline). Each takes count + child element.
Parametric curves (fn field): rose, heart, lissajous, spiral, star, superformula, hypotrochoid, wave. Server computes coordinates.
defs: gradients (linear/radial, SMIL animated stops), filters (presets: glow, neon, blur, drop-shadow, glitch, chromatic-aberration, noise, outline, inner-shadow, emboss + 5 more), clipPaths, masks, patterns (tile fills).
Animations: CSS @keyframes via animations array. Set cssClass on element matching animation name. For transforms add transformBox="fill-box" transformOrigin="center". SMIL via smilAnimations on elements (animate, animateTransform, animateMotion).
Critical format rules:
Gradient type must be "linearGradient" or "radialGradient" (not "linear"/"radial"). Each needs id, stops (array with offset 0-1, color).
Filter type must be "preset" with a "preset" field: {"type":"preset","id":"myGlow","preset":"glow","stdDeviation":8,"color":"#ff00ff"}
Keyframe offset: use "from"/"to" or percentage number 0-100 (not "0%"/"100%").
Colors: hex only (#rrggbb or #rrggbbaa). No rgb(), no named colors.
Every element needs "type" field. circle needs r, rect needs width+height, path needs d.
Output: Pure SVG XML. No JavaScript. CSS @keyframes + SMIL only.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| canvas | Yes | ||
| defs | No | ||
| elements | Yes | ||
| animations | No |
Implementation Reference
- src/renderer/svg-renderer.ts:197-229 (handler)The primary function `renderSVG` implementation for the tool `render_svg`.
export function renderSVG(config: SVGConfig): string { const canvas = config.canvas; // Build root <svg> attributes const svgAttrs = attrs({ xmlns: canvas.xmlns ?? "http://www.w3.org/2000/svg", width: length(canvas.width), height: length(canvas.height), viewBox: canvas.viewBox, preserveAspectRatio: canvas.preserveAspectRatio, } as Record<string, string | number | boolean | null | undefined>); // Render sections const defsBlock = renderDefs(config); const styleBlock = renderCSSAnimations(config.animations ?? []); const backgroundRect = renderBackground(config); const elementBlocks = config.elements.map(renderAnyElement); // Assemble body const bodyParts: string[] = []; if (defsBlock) bodyParts.push(defsBlock); if (styleBlock) bodyParts.push(styleBlock); if (backgroundRect) bodyParts.push(backgroundRect); bodyParts.push(...elementBlocks); const body = bodyParts.join("\n"); const indentedBody = body .split("\n") .map((line) => (line.trim() ? ` ${line}` : "")) .join("\n"); return `<svg ${svgAttrs}>\n${indentedBody}\n</svg>`; }