# LaTeXからSVGへ

ウェブで広く使われている数式組版エンジンKaTeX 0.19.1を使って、LaTeXの数式を単独のSVGファイルにレンダリングします。表示モードまたはインラインモードと、ピクセル単位のフォントサイズを選択できます。ファイルのサイズはKaTeXのフォントメトリクスに基づいて決まり、KaTeXのスタイルシートと数式に使われるフォントだけを埋め込むため、ウェブブラウザーで表示したときに常に同じ見た目になります。ブラウザー上で作成するウェブページ、ドキュメント、ブログ、スライドに最適です。

## よくある質問

### ブラウザーを使わずにSVGを作成する仕組みは？

サーバー上でKaTeXが数式をHTMLに組版し、ツールがそのHTMLをSVGのforeignObjectで囲みます。さらに、KaTeXのスタイルシートと、数式に必要なwoff2フォントファイルをデータURLとして埋め込みます。幅と高さはKaTeXのフォントメトリクスと各フォントの実際のグリフ幅に基づくため、余白を少し加えたサイズで数式全体を収められます。

### SVGはどこで正しく表示されますか？

Chrome、Edge、Firefox、Safariで表示できます。img要素、CSSの背景、インラインSVGマークアップとして使う場合も、ファイルを直接開く場合も同様で、ブラウザーエンジンを使ったアプリでも表示されます。Inkscape、Illustrator、FigmaのSVGインポート機能、librsvg、resvgなどのベクターエディターやコンバーターはforeignObject内のHTMLをレンダリングしないため、数式は空白で表示されます。

### 数式をベクターパスに変換しないのはなぜですか？

このツールで使われている、KaTeX の数式を字形のアウトラインとして配置できる、寛容なライセンスのライブラリはありません。また、別の組版エンジンでは KaTeX と同じ出力になりません。KaTeX 自身の HTML を埋め込むことで、正確な間隔とフォントを保てます。ベクターエディターでアウトラインが必要な場合は、SVG をブラウザーで開いて PDF に印刷してください。数式がベクター図形として保たれるため、エディターに読み込めます。

### ディスプレイモードとインラインモードの違いは何ですか？

ディスプレイモードでは、数式を独立した数式として組版します。大きな演算子の上下に極限が配置され、分数は通常の大きさで表示され、\tagによる番号付けもできます。インラインモードでは、文中の数式向けのコンパクトなスタイルになり、分数は小さく、総和や積分の極限は演算子の横に配置されます。

### フォントサイズでは何を設定できますか？

数式フォントのサイズをピクセル単位で、8から200までの整数で設定します。既定値は24です。SVG の幅と高さもこの値に応じて変わるため、48ピクセルで描画した数式は24ピクセルの場合の2倍の大きさになります。ベクターベースなので、後からCSSで拡大縮小することもできます。

### どのLaTeXコマンドに対応していますか？

KaTeX 0.19.1がサポートするすべての機能に対応しています。分数、根号、総和、積分、行列、aligned、cases、pmatrix、arrayなどの環境、アクセント、矢印、\mathbb、\mathcal、\mathfrak、\text、\color、\tagを使用できます。数式内で\defまたは\newcommandを使って独自のマクロを定義することもできます。完全なドキュメント、\usepackage、TikZ、mhchemの\ceコマンドには対応していません。

### 数式にエラーがあるとどうなりますか？

ファイルは生成されず、問題の内容と、1から数えた文字位置が表示されます。不明なコマンド、対応していない括弧、上付き文字の重複、引数が不足しているコマンドなどが示されるので、該当箇所へすぐ移動して修正できます。

### 制限はありますか？

数式の長さは最大10,000文字で、マクロの展開回数は最大1,000回です。\rule、\kern、\hspaceなどのコマンドに指定できるサイズは100emまでです。\href、\url、\includegraphicsなど、外部コンテンツを読み込んだりリンクしたりするコマンドは無効化され、未対応であることを示す赤いテキストとして表示されます。

### SVG の色と背景はどうなりますか？

背景は透明です。SVG のマークアップをHTMLページに貼り付けると、数式には周囲の要素の文字色が適用されます。画像ファイルとしては黒で描画されます。数式内で\colorまたは\textcolorを使うと、どこでも変わらない色を設定できます。

### ファイルサイズはどのくらいですか？また、アクセシビリティに対応していますか？

各ファイルには約24 KBのKaTeXスタイルシートと、数式で使うすべてのフォントフェイスがbase64のwoff2形式で含まれるため、通常の数式のファイルサイズは75～150 KBです。\text内の中国語や日本語など、KaTeXのフォントにない文字には、表示環境のフォントが使われます。SVGにはrole imgが設定され、LaTeXソースがタイトルと、スクリーンリーダー向けのaria-labelに含まれます。

ここに広告を掲載しませんか？

[メールでお問い合わせ](mailto:hi@dennn.is?subject=OneClick%20Pro%E3%81%A7%E3%81%AE%E5%BA%83%E5%91%8A%E6%8E%B2%E8%BC%89)

[広告 WordPress向けのエージェント対応プラグインスイート。](https://sleekwp.com/?ref=oneclickpro)