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 offer native CSS and JavaScript animation that SVG elements don't. SVG elements remain supported as the way to render inline vector markup (the editor's Shape library uses them), but no new SVG-element features are planned. Note that inline <svg> markup is not accepted inside an HTML element's html field — the safe-HTML subset doesn't include it.

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;
}

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​

{
  "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.