SVG Clip

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

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

Idle

See Also

• Image
• Shape: generate simple shapes programmatically instead of loading an SVG.
• Clip API Reference
• API reference: SvgClip