TikZのソースコードを使ってsvg画像を生成してwebページ上で表示してくれるjavascriptが4か月くらい前に公開されたらしいので使ってみる．mathjaxはtikzに対応していなかったので，実際に使うかわからないが少なくとも方法があることを知れてよかった．

以下のページで公開されている．

httpsに対応したページで webcrypto対応ブラウザを使うと表示できるらしい．このブログでChromeで表示することができた．

使い方

１． <script src="https://tikzwolke.com/v1/tikzwolke.js"></script> と書いてTikZ Wolkeを読み込む．<head>に書いてしまってもいい．

２．<script type="text/tikz"> </script>の中にTikZで記入できる．

使用例

入力

<script src="https://tikzwolke.com/v1/tikzwolke.js"></script>
<script type="text/tikz">
\tikz   \draw (0,0) circle (1cm); 

\begin{tikzpicture}
\node[above right] at (1.5,1.5) { $ X $ };
\fill[gray,opacity=0.1] (-2,-2) rectangle (2,2);
\draw[dashed] (0,0) circle (1);
\node[above] at (0,1) { $ \{U _ \lambda\} _ {\lambda\in\Lambda} $ };
\draw (0,0) circle (0.75);
\node at (0,0) { $ F $ };
\node at (1,-1) { $ F ^ c $ };
\end{tikzpicture}

\usetikzlibrary{intersections}
\begin{tikzpicture}
    %軸
    \draw[->] (-3,0) -- (3,0);
    \draw[->] (0,-3) -- (0,3);
    %A
    \draw [name path=A] (2,-.5) arc [start angle=0,end angle=180,radius=2];
    \node[above right] at (1,1) {$ A$ };
    %B
    \draw [name path=B] (-2,.5) arc [start angle=180,end angle=360,radius=2];
    \node[below right] at (1,-1) {$ B$ };
    %A∩B
    \fill [name intersections={of=A and B}] 
    (intersection-1) circle (2pt)
    (intersection-2) circle (2pt);
\end{tikzpicture}
</script>