wenmin-wu/llm-svg-constrained-generation

SVG Constrained Generation

Overview

LLMs can generate SVG code, but without constraints they produce invalid elements, inline styles, scripts, or malformed paths. This technique embeds the exact allowed elements and attributes directly in the prompt as a constraint block, provides one concrete example, and ends the prompt mid-tag so the model continues inside a valid SVG root. After generation, regex extracts the last <svg>...</svg> block. This pattern generalizes to any structured markup where you need to enforce a schema via prompting.

Quick Start

import re

PROMPT = """Generate SVG code for the following description.

<constraints>
* Allowed elements: svg, path, circle, rect, ellipse, line, polygon, polyline, g
* Allowed attributes: viewBox, width, height, d, cx, cy, r, x, y, fill, stroke, stroke-width, points, transform
* No text, no style tags, no scripts
</constraints>

<example>
Description: "A red circle"
```svg
<svg viewBox="0 0 256 256" width="256" height="256">
  <circle cx="128" cy="128" r="80" fill="red"/>
</svg>

</example>

Description: "{description}"

<svg viewBox="0 0 256 256" width="256" height="256">
"""

def extract_svg(output):
    matches = re.findall(r'<svg.*?</svg>', output, re.DOTALL | re.IGNORECASE)
    return matches[-1] if matches else DEFAULT_SVG

svg = extract_svg(model.generate(PROMPT.format(description=desc)))

Workflow

1. Define allowed elements and attributes as an explicit constraint block
2. Include one concrete example showing the expected format
3. End prompt mid-tag to force continuation inside valid SVG
4. Generate with the LLM
5. Extract last <svg>...</svg> match via regex

Key Decisions

• Allowlist over blocklist: Explicitly listing allowed elements is safer than trying to block bad ones
• Last match: Take the last SVG block — models often produce preamble or multiple attempts
• Fallback: Always have a default SVG for when extraction fails
• Generalizes to: HTML fragments, LaTeX, JSON schemas — any structured output with constraints

References

• Drawing with LLMs - Getting Started with Gemma 2