Media

Use Image for raster image resources and SVG for inline vector markup.

import { Image, SVG } from "presenter";
const image = Image({  imagePath: "/img/presenter.png",  /* ... additional properties ... */});
const icon = SVG({  svg: `<svg viewBox="0 0 600 600">...</svg>`,  /* ... additional properties ... */});

Image

Refer to an image by specifying a particular (local or external) imagePath, or by registering the image under resources.images and referring to it by imageId.

import { Presentation } from "presenter";

const presentation = Presentation({
  resources: {
    images: {
      portrait: "/images/portrait.jpg",
    },
  },
  slides: [slide],
});

You only need to specify either an imagePath or an imageId, not both. If both are specified, imageId takes precedence.

The full list of available Image properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of image sits at (x, y)	Anchor.TOP_LEFT
cornerRadius	number	Amount of corner rounding, in pixels	0
description	string | null	Accessible description of image	null
height	number	Height of image, in pixels	100
imageId	string | null	Identifier of image to render	null
imagePath	string | null	Path of image to render	null
opacity	number	Opacity of image	1
smooth	boolean	Whether to smooth colors along pixel boundaries	true
width	number	Width of image, in pixels	100
x	number	Horizontal position of image	0
y	number	Vertical position of image	0

SVG

Pass complete SVG markup to the svg property, then position it with x, y, width, height, and anchor. SVG is resolution-independent, making it a good fit for icons, diagrams, and generated artwork.

For external SVG files that should be loaded as resources, register the file under resources.images and use Image.

The full list of available SVG properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of graphic sits at (x, y)	Anchor.TOP_LEFT
description	string | null	Accessible description of graphic	null
height	number	Height of graphic, in pixels	100
svg	string	SVG path string of graphic	""
opacity	number	Opacity of graphic	1
width	number	Width of graphic, in pixels	100
x	number	Horizontal position of graphic	0
y	number	Vertical position of graphic	0