SVG animation

Revealer can inline an SVG file into a slide and reveal or transform its elements step by step, by referencing their id. Each step is tied to a reveal.js fragment, so it advances with the arrow keys and reverts when you step back.

Inlining an SVG

Add a > svg: command to a slide, with a path relative to the presentation folder:

=== A diagram
> svg: Media/Animated/scheme.svg

Some explanatory text.

The SVG is embedded directly in the slide (not via <img>), which is what makes its inner elements addressable for animation.

Animation steps

Each > animate: line defines one step. Its syntax is:

> animate: <selector>[,<selector2>] <attr>:<value>[; <attr2>:<value2>] [@ <duration>]

  • selector — one or more CSS selectors (typically #id) targeting elements inside the SVG. Several selectors can be comma-separated.

  • attributes — one or more name:value pairs, separated by ;. They are applied as SVG attributes (opacity, fill, transform, …).

  • duration (optional) — the transition time for this step, written after an @ (e.g. @ 1s, @ 300ms). Defaults to the global > svgDuration: setting (0.5s).

Example

=== Animated SVG
> svg: Media/Animated/demo.svg
> animate: #box fill:#0F4C75
> animate: #dot opacity:1; fill:#c0392b @ 1s
> animate: #arrow opacity:1 @ 300ms

Reveal SVG elements step by step by referencing their <code>id</code>.

Here, advancing the slide first colours #box, then fades in #dot while recolouring it over one second, then reveals #arrow quickly. Stepping back restores each element to its original state.

Tips

  • Give meaningful ids to the elements you want to animate in your SVG editor (Inkscape: Object Properties → ID).

  • Set the SVG’s initial state (e.g. opacity="0") directly in the file; the animation moves elements from that state.

  • transform animates too — e.g. transform:translate(100,0) or transform:scale(1.5).

  • The default global duration can be changed once for the whole presentation with > svgDuration: 0.8s in the settings.