Skip to main content

Documentation Index

Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt

Use this file to discover all available pages before exploring further.

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.