お絵描きソフトInkscape（インクスケープ）の使い方を初級レベルから上級レベルまで広く紹介しています。
情報追加のリクエストや分かりにくい点があれば下のCONTACTフォームからどうぞ。

Inkscapeで「数式」を描く

　このページでは、Inkscapeで数式を入力する方法を紹介します。

　論文に出てくるようなかっこいい数式をInkscapeで描くにはどうしたらよいだろうか？というはなしです。

　　　（参考：関数のグラフを描く）

(2023.06.05更新）

　SVG形式で数式を直接記述する方法でもあればいいのですが、ありません。

　そこで調べてみたところ、「LaTeX（ラテフ）」と呼ばれる文書レイアウトソフトの記述形式で数式を記述すると、LaTeXが出力してくれるキレイな数式の見た目をそのままにSVG形式に変換してくれるソフト（MathJax）があるようなので、これを試してみようと思います。

　例えば、次のような数式をInkscape上でオブジェクトとして描きたいとします。


　SVG自体には直接数式の記号を描く機能がないし、Inkscapeのエクステンションに「公式（pdflatex）」というのがありますが使い方がよくわからなかったので、MathJaxと呼ばれるソフトを使ってみました。

　このソフトはオープンソースソフトウェアの１つで、JavaScriptを使って書かれています。文字列としてLaTeXの形式で記述した数式（例えば次のようなもの）

y = \sum_{i=1}^{10}x_i

を、MathJaxのメソッドのパラメータとして入力すると、SVGの形式に変換した文字列を生成してくれるというものです。（もちろん他にもいろんな機能がありますが、ここでは省略します。）

　JavaScriptで書かれているので、MathJaxはインストールしなくても使えます。簡単なHTMLファイルを作って、そこに、MathJaxのコード（JavaScriptコード）を読み込むよう指示する記述と、MathJaxのtex2svgというメソッドにLaTeXで記述した数式を渡して、そのメソッドの戻り値からSVGコードを取り出すよう指示する記述を加えるだけです。

　必要最小限な記述に絞って小さくしたHTMLファイルの中身は次のようになります。これをブラウザに読み込むとページ上に「表示」というボタンが表示されるので、クリックします。すると、上に書いた数式を記述したLaTeXコードがtex2svgメソッドのパラメータに渡され、SVGコードに変換されて、同じページにSVGコードのまま挿入してSVGの図形として表示するとともに、そのSVGコード自身も表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>MathJaxを使って数式のSVGデータを生成する</title>
  <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
  <script>
       function convert() {
           const svg_output      = document.getElementById('svg_output');
           svg_output.innerHTML = "";
           const src_output      = document.getElementById('src_output');
           src_output.innerHTML = "";
           const result              = MathJax.tex2svg("y = \\sum_{i=1}^{10}x_i");
           svg_output.appendChild(result);

           const svg = result.children[0];
           src_output.append(svg.outerHTML);
      }
  </script>
</head>

<body>
<h1>MathJaxを使って数式のSVGデータを生成する</h1>

<input type="button" value="↓　表示" onclick="convert()" />
<div id="svg_output"></div>
<div id="src_output"></div>

</body>
</html>

　必要な部分だけ抜き書きしたようなHTMLファイルになっているので、これにいろいろ手を加えて、例えばLaTeXのコードを入力する欄を作って、任意のLaTeXコードをSVG化するようにすることも出来るはずです。

　そして、このページに表示させたSVGのコード（<svg>・・・</svg>）の部分をクリップボードにでもコピーして別のSVGファイルに保存し、Inkscapeにインポートすれば、数式の見た目はそのままにパスを使って描いた「数式」のオブジェクトをキャンバスに追加することができます。（参考：テンプレート機能とインポート機能）

　なお、生成されたSVGコードの一番上のところに「width="9.804ex" height="6.712ex"」のようなサイズを記述している部分がありますが、これはWebページにこのSVGコードを挿入したときにいい感じの大きさになるように自動的に設定されているパラメータで、このままInkscapeにインポートすると、結構大きいオブジェクトとしてキャンバスに挿入されてしまうので、そこそこの大きさでインポートしたいときは、このパラメータを手でいじって、例えば単位を「ex」から「cm」に修正してからインポートします。


,