SVG Wizard

# 🎨 SVG Wizard > **Describe a graphic in plain words — get a clean, self-contained SVG plus a pixel-perfect PNG render, refined by AI vision.** SVG Wizard is the vector-graphics sibling of [TeX Wizard](../tex-wizard). Instead of compiling LaTeX to a PDF, it authors **`image.svg`** and rasterises it to **`render.png`** using a **100% browser-based rendering engine** (`<img>` + `<canvas>` → PNG). That PNG is then fed back to a vision model for an iterative *render → look → critique → fix* loop. --- ## ✨ Why SVG Wizard? * **Plain language → production SVG:** Describe a logo, diagram, icon, chart or poster; get valid, self-contained SVG markup. * **No toolchain required:** Rasterisation happens in your browser. No Inkscape, no `rsvg-convert`, no headless Chrome needed. * **Real vision feedback:** The AI reviews the actual *rendered pixels*, so it catches clipped text, overlapping shapes, invisible strokes and off-canvas elements that reading the markup alone would miss. * **Full manual control:** Edit the SVG source inline, tweak style directives, or hand-write the update notes yourself. --- ## 🚀 Getting Started ### Step 1 · Set up your inputs 📝 1. **Notes** — what the graphic should depict, its dimensions, contents and labels. 2. **Style Directives** *(optional)* — palette, stroke weights, flat vs. gradient, font stack, `viewBox` size. 3. **Reference Image** *(optional)* — click, drop or paste a picture (PNG/JPEG/WebP/SVG). It is normalised to `reference.png` in the session and shown to the AI while **drafting** the SVG *and* during the **vision/OCR comparison** in Review Render, so labels and layout are matched to the original. 4. **Models** — pick a Smart model (authoring), Fast model (edits) and Image model (visual review). Use vision-capable models when a reference image is attached. ### Step 2 · Run the pipeline ⚙️ | # | Step | What it does | |---|------|--------------| | 1 | **▶ Render SVG** | Generates `image.svg` from `notes.md` + `style.md` (+ `reference.png` if attached). | | 2 | **🧾 Describe SVG** | Writes `metadata.json` — animation flag, cycle duration and the timeline offsets to snapshot. **🔎 Auto-detect** does this locally, without a model call. | | 3 | **🖼 Rasterize** | Renders `image.svg` → `render.png` in the browser (plus `render.frame-NN.png` + `render.frames.png` for animations), writing `render.log.md`. | | 4 | **✏️ Update SVG** | Applies `update-notes.md` to `image.svg`. | | 5 | **🔍 Review Render** | Vision model inspects `render.png` and the frame contact sheet, OCR-diffs them against `reference.png` (when present) and rewrites `update-notes.md`. | Then loop **5 → 4 → 3** until it looks right. Tick **Auto-rasterize** and every SVG change re-renders instantly. ### 🎞 Animated SVGs SMIL and CSS `@keyframes` animations are supported. The rasteriser cannot seek an `<img>`-hosted SVG, so it **bakes the seek into the markup**: SMIL `begin` values are shifted backwards and CSS animations get a matching negative delay plus `animation-play-state: paused`. Every frame is therefore deterministic. Mark the graphic as animated in the **metadata.json** card (or press **🔎 Auto-detect**), set the cycle duration and either a frame count (evenly spaced) or an explicit list of capture times. Rasterizing then produces: * `render.png` — the poster frame (`animation.posterTimeMs`), * `render.frame-01.png` … — one PNG per capture time, * `render.frames.png` — a labelled contact sheet of the whole timeline, which the vision review reads in a single pass. Use finite `dur` values and numeric `begin` offsets; event-based `begin` (`click`, `otherId.end`) cannot be seeked and is reported in the render log. ### Step 3 · Inspect & export 📤 * **Live SVG preview** re-renders as you type (scripts are stripped before rasterising). * **⬇ Download SVG** / **⬇ Download PNG** to grab the assets. * **Render Options** control the output scale (1×–4×) and background (transparent / white / dark). --- ## 🎛 Render Options | Option | Meaning | |--------|---------| | **Scale** | Output PNG is `intrinsic size × scale`. Total pixels are capped (~16 MP) and scaled down automatically if exceeded. | | **Background** | Transparent keeps alpha; White/Dark composites a flat backdrop first — useful for checking contrast. | | **Auto-rasterize** | Re-render the PNG automatically whenever `image.svg` is regenerated or updated. | --- ## 💡 Pro Tips * **Always set a `viewBox`.** If `width`/`height` are missing, SVG Wizard falls back to the `viewBox` (or 512×512) and notes it in the render log. * **Keep it self-contained.** External `<image href="https://…">` references taint the canvas and will fail the PNG export — inline data URIs instead. * **Fonts:** only fonts available to the browser render. Prefer generic stacks, or convert text to paths for exact fidelity. * `Ctrl/Cmd+S` saves every editor at once; autosave also runs as you type. * If your session's file API rejects binary uploads, the app falls back to writing `render.png.base64.txt` and you can press **🖥 Server** to rasterise with `rasterize.sh` instead. * **Reference images are downscaled** to a 1600 px longest edge and re-encoded as PNG so vision models can read them reliably. Paste from the clipboard anywhere outside a text box to attach one instantly. --- ## 📂 Session files | File | Role | |------|------| | `notes.md` | Your brief (input) | | `style.md` | Style directives (input) | | `reference.png` | Optional reference image used for drafting and OCR comparison (input) | | `update-notes.md` | Revision instructions (written by review, read by update) | | `image.svg` | The generated vector source | | `metadata.json` | Machine-readable description of the SVG — animation flag, duration, capture times (schema: `ops/metadata_schema.ts`) | | `render.png` | Browser-rendered raster used for vision review | | `render.frame-NN.png` | One raster per animation capture time | | `render.frames.png` | Labelled contact sheet of every captured frame | | `render.log.md` | Rasterisation report: sizes, scale, warnings | Happy vectoring with **SVG Wizard**! 🎨✨