How do we compile and visualize the animations of TikZ 3.1?
Animations works only with the SVG format. So you should compile your example at first with latex (not pdflatex). Then you should run dvisvgm file which will show something like this in a command line
C:\Users\XXX\Documents\tests>dvisvgm test-utf8
pre-processing DVI file (format version 2)
processing page 1
graphic size: 66.670012pt x 51.11758pt (23.431829mm x 17.965775mm)
output written to test-utf8.svg
1 of 1 page converted in 1.64 seconds
You will then find a .svg-file in your folder which you can open in a browser or some other application that understand svg.
You can't see the animations in pdf, but you can take snapshots:
remove the dvisvgm option
then run this with pdflatex
\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{animations}
\begin{document}
\foreach \t in {0.5, 1, 1.5, 2}
{
\tikz[make snapshot of=\t]
\node :fill opacity = { 0s="1", 2s="0", begin on=click }
:rotate = { 0s="0", 2s="90", begin on=click }
[fill = blue!20, draw = blue, ultra thick, circle]
{Click me!};}
\end{document}
There are some dvisvgm command line options that are not mentioned in the TikZ manual, but which should generally be used.
Font format: --font-format=woff
LaTeX input (compile with latex or lualatex --output-format=dvi):
\documentclass[varwidth]{standalone}
\usepackage{amsmath}
\begin{document}
Hello World!
\begin{equation*}
\int_0^1 2x dx = 1
\end{equation*}
\end{document}
Compile with:
latex texsx-469409-a
dvisvgm --zoom=-1 --exact --font-format=woff texsx-469409-a
The default font format that dvisvgm embeds in the SVG output is not correctly interpreted by most WEB browsers. Instead, browsers use some replacement font, e. g. Times. Also, mathematical symbols may be incorrectly displayed:
Therefore, always add option --font-format=woff!!! The default font format may change in future dvisvgm versions.
Improved bounding box calculation: --exact
SVG-1.1, the current standard, is a single-page document format, primarily intended for creating vector graphics to be embedded in the HTML code of Web pages. Therefore, dvisvgm tries to calculate the tight Bounding Box around the content of the page, similar to what the standalone class is made for. One could also use the article class together with \pagestyle{empty} to achieve the same result without using standalone; dvisvgm tries to crop the page around the visibile content.
In case of pure-text documents, without using graphical objects that push the page borders outwards, the resulting bounding box of the output is determined by the glyph boxes from the tfm files of the used font. However, these tend to be smaller than the glyphs themselves. This may lead to cropped output where parts of the glyphs are invisible because they are outside of the document edges.
dvisvgm provides option --exact to calculate the document's bounding box in such a way that glyph outlines fall entirely within the final bounding box.
Alternatively, the border option of the standalone document class can be set with a non-negative length value in order to add space around the content. This requires dvisvgm to be called with option --bbox=papersize. [Comment by @Martin]
Responsive SVG: --zoom=-1
Option --zoom=-1 produces "responsive SVG" that automatically scale to fill the available space. Such SVG don't have a fixed size. This is important for SVG to be embedded into a web page using HTML containers, such as <object> or <img>.
LaTeX input (compile with latex or lualatex --output-format=dvi):
\documentclass[dvisvgm]{standalone}
\usepackage{tikz}
\usetikzlibrary{animations}
\begin{document}
\tikz
\node :fill opacity = { 0s="0", 5s="1" }
:rotate = { 6s="0", 10s="360", repeats, restart=false}
[fill = blue!20, draw = blue, ultra thick, circle]
{Hello!};
\end{document}
Compile with:
latex texsx-469409
dvisvgm --zoom=-1 --exact --font-format=woff texsx-469409
HTML code for embedding:
<img src="https://agrahn.gitlab.io/svg/texsx-469409.svg" width="200"/>
<img src="https://agrahn.gitlab.io/svg/texsx-469409.svg" width="400"/>
<img src="https://agrahn.gitlab.io/svg/texsx-469409.svg"/>
Configuring Texstudio for dvisvgm
Magic comments
For texstudio a quick way to compile a svg animation are magic comments, i.e. the first line in the following file
% !TeX TS-program = latex % | latex % | dvisvgm --exact --font-format=woff --zoom=-1 %.dvi
\documentclass[dvisvgm]{standalone}
\usepackage{tikz}
\usetikzlibrary{animations}
\begin{document}
\tikz
\node :fill opacity = { 0s="1", 2s="0", begin on=click }
:rotate = { 0s="0", 2s="90", begin on=click }
[fill = blue!20, draw = blue, ultra thick, circle]
{Click me!};
\end{document}
This will run latex two times and afterwards convert it animated svg
Create a custom user command
Another approach is to create a custom user command. In the texstudio preferences->build add the line
latex % | latex % | dvisvgm --exact --font-format=woff --zoom=-1 %.dvi
under "user commands":
Then one can find this open in the menu bar Tools->user->svg (or whatever name you chose in the previous step)
(In case dvisvgm is not in your path variable, replace dvisvgm in the above commands with the full path to its installation location)
Arara rule for dvisvgm
With the following rule for the cool automation tool arara
!config
identifier: dvisvgm
name: DVISVGM
commands:
- name: The dvisvgm program
command: >
@{
base = getBasename(file).concat('.dvi');
return getCommand('dvisvgm', base, options);
}
arguments:
- identifier: options
flag: >
@{
if (isList(parameters.options)) {
return parameters.options;
}
else {
throwError('I was expecting a list of options.');
}
}
the following document will produce an animated svg if compiled with arara
% arara: latex
% arara: latex
% arara: dvisvgm : {options: ['exact', 'font-format=woff', 'zoom=-1']}
\documentclass[dvisvgm]{standalone}
\usepackage{tikz}
\usetikzlibrary{animations}
\begin{document}
\tikz
\node :fill opacity = { 0s="1", 2s="0", begin on=click }
:rotate = { 0s="0", 2s="90", begin on=click }
[fill = blue!20, draw = blue, ultra thick, circle]
{Click me!};
\end{document}