Math mode in SVG

Abstract

A quick tip on rendering math mode in SVG.

Keywords

Latex, PGF, RMD, R Studio, SVG

\(\require{cancel}\) \(\def\oot{\frac{1}{2}}\)

This is a quick tip on rendering math mode in SVG. You need to create a chunk like the following.

Here is the complete code of the chunk in Quarto format:

#| echo: false
#| label: fig-svgexample
#| fig-ext: !expr if (knitr:::is_latex_output()) 'pdf' else 'svg'
#| fig-cap: "A simple TikZ diagram with math mode."
#| engine: tikz
#| engine-opts:
#|   dvisvgm.opts: "--no-fonts --bbox=min --libgs=/opt/homebrew/opt/ghostscript/lib/libgs.dylib" #MacOS related
\definecolor{drawingcolor}{RGB}{110, 110, 110}
\usetikzlibrary{positioning}
\begin{tikzpicture}[every node/.append style={draw,drawingcolor, minimum size=0.5cm}]
\node [draw=none] (X) at (0,0) {$X_{\alpha}$};
\node [draw=none] (Y) at (2,0) {$Y_{\beta}$};
\node [draw=none] (Z) at (1,1) {$Z_{\beta}$};
\path [-latex,drawingcolor] (X) edge (Y);
\draw [-latex,drawingcolor] (Z) edge (Y);
\draw [-latex,drawingcolor] (Z) edge (X);
\end{tikzpicture}

Figure 1 shows how the chunk should look like.

Figure 1: The full chunk.

Once evaluated, the image will look like Figure 2:

Figure 2: A simple TikZ diagram with math mode.

And that’s it!