Skip to main content

SVG Elements (Deprecated)

Deprecated for new text & animation work

For text, badges, layouts, and animated graphics, prefer HTML elements with customCode — they provide rich HTML layout and native CSS/JavaScript animation. Existing SVG elements remain supported, and the editor's Shape library uses them. For new HTML compositions, TEXT.html also accepts a restricted geometry-only SVG subset. Its allowed tags/attributes are stricter than the standalone SVG rules here.

SVG elements render inline SVG markup into a visual layer. The API accepts safe SVG content and rejects active content or external resource references.

Interface​

interface SVGItem {
  type: "SVG";
  svg: string; // must start with <svg
  // ...common element properties
  filter?: FilterOptions;
  chromaKey?: ChromaKey;
  customCode?: CustomCode;
}

SVG elements share the common element properties plus filter and chromaKey — but not resize, zoom, cropParams, or radius.

Safety Restrictions​

The hosted API rejects:

  • <script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, and <video> tags.
  • Event handler attributes such as onload or onclick.
  • External href, xlink:href, and src values — only internal fragment references like #gradient-id are allowed.
  • External url(...) references. Internal url(#id) references are allowed.
  • Excessive numeric values, oversized dimensions, and control characters.

Inline gradients and filters referencing local IDs are valid; external images, fonts, scripts, and network-loaded CSS are not.

Example​

This is a visual element fragment for payload.visuals. Its timing fields apply to video projects; omit them for an image project.

{
  "type": "SVG",
  "position": "center-center",
  "enterBegin": 0,
  "enterEnd": 1,
  "exitBegin": 4,
  "exitEnd": 5,
  "enterAnimation": "fade",
  "exitAnimation": "fade",
  "svg": "<svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#7c3aed\" /><stop offset=\"100%\" stop-color=\"#d946ef\" /></linearGradient></defs><circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"url(#grad1)\" /></svg>"
}

Best Practices​

  • Include width, height, and viewBox for predictable sizing.
  • Use local IDs for gradients, patterns, and filters; avoid external dependencies.
  • For animation, build the graphic with CSS in an HTML element instead.