Clip types

SVG clips

The SvgClip renders vector graphics on the canvas. Ideal for logos, icons, and any asset that needs to stay sharp at any resolution.

When you add an SVG file to the Library, an SvgClip is created automatically instead of an ImageClip. Resizing up to 4096×4096 pixels is supported without visible quality loss.

Create an SVG clip

Runnable example

const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/240px-SVG_logo.svg.png",
  );

const clip = await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);

Full runnable example

import { Engine } from "@rendley/sdk";

await Engine.getInstance().init({
  license: {
    licenseName: "DOCS_PLAYGROUND",
    licenseKey: "DOCS_KEY",
  },
  display: {
    width: 1920,
    height: 1080,
    backgroundColor: "#000000",
    view: document.getElementById("rendley-canvas") as HTMLCanvasElement,
  },
});

const layer = Engine.getInstance().getTimeline().createLayer();

const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/240px-SVG_logo.svg.png",
  );

const clip = await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);

await Engine.getInstance().getTimeline().play();

Supported features

The renderer handles most SVG 1.1 features: paths, shapes, gradients, masks, clip-paths, filters, embedded images and text. CSS animations inside the SVG are not played: for animated vectors, use a Lottie clip instead.

Styling an SVG clip

Position, scale, rotation and opacity work the same as on any other clip:

clip.style.setScale(1.5, 1.5);
clip.style.setRotation(45);          // degrees
clip.style.setOpacity(0.8);

You can also animate these properties over time with keyframes to create logo reveals, spinning icons, and other motion graphics.

When to use SVG vs. shape vs. Lottie

Use case	Recommended clip type
Simple rectangles, circles, lines	Shape clip: lighter, no file needed.
Logos, icons, detailed illustrations	SVG clip, vector fidelity at any scale.
Animated illustrations, stickers	Lottie clip: plays embedded animations.

SVG clips

Create an SVG clip

Supported features

Styling an SVG clip

When to use SVG vs. shape vs. Lottie

What to read next