---
title: "SVG Elements (Deprecated)"
canonical_url: https://docs.zvid.io/docs/structure/svg-elements/
source: docs/structure/svg-elements.md
content_revision: 6338386a1dd87e4a
---

# SVG Elements (Deprecated)

> **Deprecated for new text & animation work**
For text, badges, layouts, and animated graphics, prefer
[HTML elements](https://docs.zvid.io/docs/structure/text-elements/) with
[`customCode`](https://docs.zvid.io/docs/structure/text-elements/#native-css--javascript-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](https://docs.zvid.io/docs/structure/text-elements/#inline-svg-in-html).
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

```typescript
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](https://docs.zvid.io/docs/structure/common-properties/)
plus [`filter`](https://docs.zvid.io/docs/structure/properties/filter-options/) and
[`chromaKey`](https://docs.zvid.io/docs/structure/properties/chroma-key/) — 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.

```json
{
  "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](https://docs.zvid.io/docs/structure/text-elements/) instead.

## Related Pages

- [Text & HTML Elements](https://docs.zvid.io/docs/structure/text-elements/)
- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Common Element Properties](https://docs.zvid.io/docs/structure/common-properties/)