Skip to main content
Svg renders inline SVG markup directly in the page. Content is automatically sanitized to strip scripts and event handlers, making it safe for LLM-generated diagrams, charts, and illustrations.

​
Basic Usage

The first positional argument is content. Unlike Embed, SVG renders inline in the DOM — it participates in the page layout and can be styled with CSS classes.

​
Sizing

By default, the SVG renders at its intrinsic size (from viewBox). Override with width and height:
Fixed size
from prefab_ui.components import Svg

Svg(content=diagram_svg, width="400px", height="300px")

​
Security

All SVG content is sanitized with DOMPurify before rendering. This strips <script> tags, event handlers (onload, onclick, etc.), and other potentially dangerous elements. Safe SVG features — paths, shapes, gradients, filters, text — pass through unchanged.

​
API Reference

Svg Parameters

​
content
str
required
SVG markup string.
​
width
str | None
default:"None"
CSS width value with units.
​
height
str | None
default:"None"
CSS height value with units.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Svg
{
  "type": "Svg",
  "content": "string (required)",
  "width?": "string",
  "height?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Svg.