TeX数式→画像変換(PNG・SVG)

TeX(LaTeX)の数式を入力すると、プレビューを見ながらPNG・SVGの画像として保存できるツールです。分数・積分・行列・ギリシャ文字・矢印・集合記号など200近い補助ボタンで記号を挿入でき、文字の大きさ・余白・文字色・背景色(透過)・PNGの解像度(1x〜4x)を調整できます。スライドや資料、ブログ、チャットに数式を貼りたいときに使え、描画はすべてブラウザ内で行われます。

数式はブラウザ内で画像に変換され、入力内容がサーバーへ送信されることはありません。入力した数式はこのブラウザに自動で保存されます。

ボタンを押すとカーソル位置に挿入されます。文字列を選択してから押すと、その文字列が {} の中に入ります。ボタンにマウスを乗せると挿入されるコマンドが表示されます。

$ や \[ \] で囲まずに、数式の中身だけを入力してください。複数行は aligned 環境と \\ で改行できます。

プレビュー

プレビューは枠に収まるよう縮小して表示されます。市松模様の部分は透過です。

px
px
色

使い方

  1. 入力欄にTeXの数式を入力します($ や \[ \] で囲む必要はありません)。「例」から代表的な数式を読み込むこともできます。
  2. 補助ボタンの分類(構造・括弧・行列・装飾/書体・ギリシャ文字など)を選び、ボタンを押すとカーソル位置に挿入されます。文字列を選択してから押すと、その文字列を分数の分子などの中に入れられます。
  3. 「文字の大きさ」「余白」「文字色」「背景色」で画像の見た目と大きさを調整します。プレビューの横に出力される画像のピクセル数が表示されます。
  4. 「PNGをダウンロード」「SVGをダウンロード」で保存するか、「画像をコピー」でクリップボードにコピーしてそのまま貼り付けます。PNGは1x〜4xの解像度を選べます。

このツールについて

TeX数式→画像変換は、TeX(LaTeX)の数式記法で書いた式を、スライドや文書、Webページなどに貼れる画像に変換するツールです。数式エディタを持たないアプリでも、画像としてなら数式をきれいに載せられます。

描画にはMathJax(Apache-2.0)を使い、AMS数学パッケージ(aligned・cases・pmatrixなど)、mathtools、physics、cancel、colorなど主要な拡張を利用できます。SVGは文字をパスとして含むため、フォントのない環境でも同じ見た目で表示できます。

MathJaxはこのツールのページを開いたときにだけ読み込まれます。入力した数式はこのブラウザ(localStorage)に保存されるだけで、サーバーへ送信されることはありません。

入力欄に「\frac{a}{b}」と入力すると、aが分子、bが分母の分数が表示されます。次に「b」を選択して補助ボタンの「√」を押すと「\frac{a}{\sqrt{b}}」になり、選んだ部分だけを構造の中に入れられることを確認できます。

画像の大きさは「文字の大きさ」と「余白」で決まり、PNGの解像度はそこに倍率を掛けたピクセル数になります。SVGはベクター画像のため拡大しても粗くなりませんが、\text{} 内の日本語は端末のフォントで描画されます。数式の変換はブラウザ内のMathJaxで行い、入力内容は送信されません。

よくある質問

$ や \begin{equation} で囲む必要はありますか?

不要です。数式の中身だけを入力してください。複数行の式は aligned 環境(補助ボタンの「行列・環境」にあります)と \\ で改行できます。

画像の大きさはどう決まりますか?

「文字の大きさ」(1文字の高さの目安となるpx)と「余白」から画像の幅と高さが決まり、PNGではさらに解像度(1x〜4x)を掛けた大きさになります。高解像度ディスプレイや印刷用には2x以上がおすすめです。

\text{} の日本語は画像に含まれますか?

含まれますが、\text{} 内の日本語は数式フォントではなく端末のフォントで描画されます。SVGを別の端末で開くと字形が変わる場合があるため、見た目を固定したい場合はPNGで保存してください。

使えないコマンドはありますか?

\usepackage や \require による追加パッケージの読み込みと、数式以外の文書レイアウト用コマンドは使えません。未定義のコマンドはエラーとして表示されます。