svg-animate

svg-animate turns your TikZ diagrams into step-by-step animations that run natively in any web browser — no JavaScript, no plugins, no PDF viewer required.

Write your diagram once. Get two outputs from the same source file:

• an animated SVG for the web, embedded slides, or GitHub README previews
• a static PDF for print, with all steps stacked or collapsed to a single clean frame

The animation model maps directly onto the way you already think about progressive diagram reveals:

• \begin{animate} — wraps your TikZ picture
• \reveal{...} — marks what appears at the current step
• \animstep — advances to the next step

That is all you need for a working animation. Fine-grained control is there when you need it: per-step durations, multi-step and range visibility, blinking elements, one-shot or looping playback, and a \noanimate fallback that controls what a PDF reader shows after the animation ends.

A LaTeX package for producing animated SVG diagrams with TikZ.

The animation model is simple: content is divided into discrete steps, and only one step is fully visible at a time — like frames in a film. Opacity transitions are instantaneous (no cross-fades), implemented as SMIL keyframes in the SVG output.

Quick start

\documentclass{standalone}
\usepackage{svg-animate}

\begin{document}
\begin{tikzpicture}
  \begin{animate}[duration=1]
    \reveal{\node at (0,0) {Step 1};}
    \animstep
    \reveal{\node at (0,0) {Step 2};}
    \animstep
    \reveal{\node at (0,0) {Step 3};}
  \end{animate}
\end{tikzpicture}
\end{document}

Compilation

# Animated SVG
latex diagram.tex && latex diagram.tex
dvisvgm --font-format=woff2 --optimize=all --bbox=min diagram.dvi -o diagram.svg

# Static PDF (animations ignored)
xelatex diagram.tex

Or simply run make inside the package directory to build example.svg and doc.pdf.

Example — traffic light

The included example.tex animates a traffic light. Each coloured circle is its own step; the amber light uses a shorter duration.

Open example.svg directly in a browser to see the animation.
GitHub's Markdown renderer may display it as a static image.

Feature showcase

The test.tex file exercises the main features side by side:

Labels beside each light illustrate:

• fr. 1 — standard \reveal, active only in step 1
• fr. 2+4 / fr. 3+4 — step={2,4} / step={3,4}, active in multiple non-consecutive steps
• fr. 3 — blink — blink=0.3, flashes during step 3; hidden between steps (default blink off opacity=0)
• fr. 3 — dimmed blink — blink=0.3, inactive opacity=0, blink off opacity=0.25, hidden between steps; blinks between 1 and 0.25 during step 3
• step={1-3} — range syntax, active in steps 1 through 3
• step={1,2,3,4} — always visible, active in every step

Static PDF output

In PDF mode (xelatex, pdflatex) the package detects the output format and adapts automatically:

• No \noanimate — \reveal elements are drawn at full opacity simultaneously (all steps stacked), which is useful for a quick overview.
• \noanimate{content} present — \reveal elements are suppressed and only the \noanimate content is drawn, giving a single clean static frame.
• \reveal[noanimate]{content} — forces this specific element to render in PDF even when \noanimate is active in the same environment.

\noanimate is completely ignored in SVG mode.

Key interface

/anim/.cd keys

One-shot animation with loop=false

By default animations loop indefinitely. Set loop=false to play through all steps once and freeze on the last frame:

\begin{animate}[duration=1, loop=false]
  \reveal{\node {Step 1};}
  \animstep
  \reveal{\node {Step 2};}
  \animstep
  \reveal{\node {Step 3};}
\end{animate}

The global default can be changed with \tikzset{/anim/loop=false}.

When the animation ends, the SVG browser reverts each element to its base opacity (fully visible). If a \noanimate fallback is present it therefore becomes visible at that point, giving the diagram a natural static resting state after the animation completes.

Multi-step visibility with step=

By default \reveal makes an element visible only during the current step. The step= key overrides this: the element becomes visible during every step in the specification, regardless of where \reveal is placed.

\begin{animate}[inactive opacity=0.08]
  \reveal[step={1,3}]{\node[red]  at (4,1) {visible in steps 1 and 3};}
  \reveal[step=2-4]{  \node[blue] at (4,0) {visible in steps 2 through 4};}
  \reveal[step={1,3-5}]{\node at (4,-1) {steps 1, 3, 4, 5};}
\end{animate}

Syntax:

• Single step — step=2
• Range — step=2-5 (steps 2, 3, 4, 5)
• List — step={1,3} (braces required when listing multiple values)
• Mix — step={1,3-5} (braces required)

Consecutive steps in the specification are automatically merged into one animation window (no redundant keyframe at the shared boundary).

Blinking elements with blink=

The blink= key makes an element flash on and off during its active step. The value is the full blink period in seconds: the element is visible for period/2 seconds, hidden for period/2 seconds, and repeats.

\begin{animate}[duration=2, inactive opacity=0.15]
  \reveal{\node at (0,1) {Step 1 — static};}
  \animstep
  \reveal[blink=0.4]{\node[fill=yellow] at (0,0) {Step 2 — blinks};}
  \animstep
  \reveal{\node at (0,-1) {Step 3 — static};}
\end{animate}

If the step duration is not an exact multiple of period/2, the last partial half-period is shown up to the step boundary.

blink= and step= are mutually exclusive; when both are given, blink= takes priority.

The blink amplitude is controlled via blink on opacity (default 1) and blink off opacity (default 0). These keys govern only the intra-step oscillation; between steps the element uses inactive opacity as normal.

To hide a blink element between steps, set inactive opacity=0 explicitly. Because the static column now uses \begin{animate}[static], this does not affect the static display:

%% Hidden between steps; blinks between 1 and 0.25 during step 2.
\reveal[blink=0.4, inactive opacity=0, blink off opacity=0.25]{
  \node[fill=yellow] at (0,0) {Step 2};
}

Static display with static

To render all steps simultaneously at full opacity (for a printed handout or overview), use the static key on the animate environment:

\begin{animate}[static]
  \stepOne \animstep \stepTwo \animstep \stepThree
\end{animate}

All \reveal elements are drawn at their natural opacity regardless of inactive opacity, blink on/off opacity, or any other per-element setting. This is cleaner than setting four opacity keys to 1.

Requirements

• PGF/TikZ ≥ 3.1.9 (for \usetikzlibrary{animations})
• dvisvgm ≥ 2.9 for SVG output
• Any modern LaTeX distribution (TeX Live 2022+, MiKTeX 22+)

Documentation

make doc.pdf

Full documentation with key reference and examples: svg-animate.pdf.

Copyright

svg-animate is copyright 2026 Sébastien Gross and distributed under the terms of the GNU Affero General Public License v3.0 or later.