Images and video
SVG and raster images, animated PNG and GIF, and video files played through the browser.
{#svg x=-7 y=-2.9 width=4}
{#still right-of:#svg buff=0.6 width=4}
{#once x=2.2 y=-2.9 width=3 play=once step=1}
{#loop right-of:#once buff=1 width=3 play=loop step=2 hide=3}
{#movie width=7.5 play=once step=4}
Images#
An image occupies a block of its own, is centered on x, y (or placed by anchor=, at=
and the relative constraints), and is sized with width (height scales it to fit). Paths
resolve relative to the Markdown file; data: URIs and absolute URLs work too.
- SVG files keep nested transforms and inherited styles.
<text>inside an SVG is not rendered: outline text before exporting. - Raster files may be PNG, JPEG, GIF or WebP.
Animated images#
Multi-slide APNG and GIF files accept play=:
| Value | Behaviour |
|---|---|
play=once |
one complete cycle at the file's frame durations, keeping the last frame |
play=loop |
the reveal is its own stop that advances automatically into a browser loop; the next click leaves the loop |
A hidden animated image shown again restarts at its first frame; images sharing a step play together, finite ones before loops. Single-slide files cannot request playback.
Video#
A video file (.mp4, .webm, .ogv, .mov) uses the same syntax and plays through the
browser's decoder:
play=onceplays one pass as its own stop;play=loopkeeps looping until the next click; withoutplaythe first frame is shown as a still.- Videos start muted so that playback is never blocked by autoplay rules;
muted=falseturns the sound on (the first click of the deck counts as the gesture browsers require). - Playback follows the clip's clock: the speed control resyncs rather than slows the video, and backward navigation jumps over a video instead of rewinding it.
--one-fileexports embed videos as data URIs, which grows the file quickly; prefer the folder export for decks with long videos.