# SVG Element

Use `svg` for logos, vector illustrations, and simple shape groups.

## Shape

```ts
interface SvgClip extends BaseClip {
  type: "svg";
  svg?: string | { $ref: string };
  src?: string | { $ref: string };
}
```

## Fields

- `svg`: inline SVG markup or a reference to `assets.svgs[].svg`
- `src`: remote SVG URL or an asset reference

The runtime renders SVGs through a stable image/data URL path. For animated strokes, use `path` or `line`.

## Assets

```json
{
  "assets": {
    "svgs": [
      {
        "id": "logo",
        "svg": "<svg viewBox=\"0 0 100 100\">...</svg>"
      }
    ]
  }
}
```

## Example

```json
{
  "type": "svg",
  "start": 0,
  "duration": 4,
  "svg": { "$ref": "logo" },
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": 320,
    "height": 320
  },
  "animations": [
    {
      "type": "rotate",
      "from": -8,
      "to": 8,
      "duration": 1.6,
      "loop": true
    }
  ]
}
```