SVG Studio

Problem

When generating posters, infographics, flowcharts, architecture diagrams, charts, and icons, multimodal image models can produce wrong text, inaccurate numbers, unstable ratios, and outputs that are hard to edit later. Hand-written SVG can also fail on text wrapping, gradients, filters, coordinate mapping, and renderer compatibility. SVG Studio addresses this by using code to draw precise vector graphics, then exporting them as bitmaps or animations while keeping an editable source.

Workflow

The core flow is:
- Set the canvas: choose a viewBox for 16:9, 1:1, 9:16, OG, and similar ratios; use --scale or --width to control output sharpness.
- Write SVG: start with a background rect; use multiple <text> elements for line breaks; define gradients and filters in <defs> and reference them with url(#id); map data coordinates to pixel coordinates and remember SVG's y-axis points downward.
- Render PNG: use scripts/render.py to prefer Chrome and fall back to resvg or cairosvg, with support for transparent backgrounds, forced sizes, and engine selection.
- Animate: for HTML playback, use SMIL or CSS animations directly; for GIF, APNG, WebP, or MP4 files, use scripts/animate.py to compose multi-frame SVG output.
- Verify delivery: inspect the rendered image for clipped text, background, Chinese font rendering, and animation frames, then deliver the .svg source plus bitmap or animated file.

Boundary

It fits vector, precise, editable graphics: infographics, SaaS feature pages, flowcharts, data charts, icons, and loading animations. For photorealistic people, landscapes, watercolor, or realistic materials, multimodal image models are more suitable. Hand-drawn or note-style designs can use the provided filter recipes, but true material realism is outside its stable scope.