TikZJax converts script
tags (containing TikZ code) into SVGs.
See a live demo at https://tikzjax.com/.
In the <head>
of your HTML, include
<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>
Then in the <body>
, include TikZ code such as
<script type="text/tikz">
\begin{tikzpicture}
\tikzstyle{every node} = [draw, fill=white, circle, inner sep=0pt, minimum size=5pt]
\tikzstyle{n} = [draw=none, rectangle, inner sep=2pt] %name style
\node at (0,-.5)[n]{$O_4$};
\node(1) at (0,3){};
\node(h) at (0,2.5){} edge (1);
\node(f) at (1,2){} edge (1);
\node(e) at (0,2){} edge (h);
\node(d) at(-1,2){} edge (1);
\node(c) at (1,1){} edge (e) edge (f);
\node(b) at (0,1){} edge (d) edge (f);
\node(a) at(-1,1)[label=left:$y$]{} edge (d) edge (e);
\node(g) at (0,.5)[label=right:$x$]{} edge (b);
\node(0) at (0,0){} edge (a) edge (g) edge (c);
\node at (0,-1)[n]{};
\end{tikzpicture}
</script>
Your TikZ will be compiled into SVGs; the <script>
element will be
replaced with the corresponding SVG. For instance, the above code generates
Using web2js, the Pascal source of tex
is compiled to WebAssembly; the latex format is loaded (without all the hyphenation data), and
\documentclass[margin=0pt]{standalone}
\def\pgfsysdriver{pgfsys-ximera.def}
\usepackage{tikz}
is executed. Then core is dumped; the resulting core is compressed, and by reloading the dumped core in the browser, it is possible to very quickly get to a point where TikZ can be executed. By using an SVG driver for PGF along with dvi2html, the DVI output is converted to an SVG.
To emphasize this: all of this happens in the browser.