SVG Element

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

Shape

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

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

Example

{
  "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
    }
  ]
}