---
title: svg
description: Multi-path artwork carried as raw markup or a fetched URL — the one node that injects spec-supplied HTML, so it is opt-in behind `allowRawSvg`.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes/svg
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# `svg`

Multi-path artwork carried as raw markup or a fetched URL — the one node that injects spec-supplied HTML, so it is opt-in behind `allowRawSvg`.

## Example

**svg**

```json
{
  "id": "home",
  "layout": {
    "_id": "root",
    "type": "column",
    "gap": 12,
    "padding": 16,
    "children": [
      {
        "_id": "s",
        "type": "svg",
        "svgContent": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\"/></svg>",
        "width": 48,
        "height": 48,
        "color": "var(--accent)"
      },
      {
        "_id": "cap",
        "type": "text",
        "variant": "caption",
        "content": "Requires allowRawSvg on the host"
      }
    ]
  }
}
```

## States

Opt-in via `allowRawSvg`; without it, `svgContent` is a placeholder and a `.svg` src goes through `<img>`. Common to every node: `hover` / `press` / `focus` CSS bags, `showWhen` / `hideWhen`, `animate`.

## Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.