「SVG」タグアーカイブ

dvisvgmとSTIXフォント

1件のフィードバック

以前、dvisvgmについてちょろっと書いた。その時は、dvisvgmでSVGファイルを生成する時に --no-fonts オプション（文字のアウトライン化をする）をつけないとフォントが正常に指定されないという結論だったわけだが、それではブラウザで表示した時に文字が選択できない。

そこで、dvisvgmで --no-fonts オプションを使わずに生成したSVGファイルで、文字が正常に表示されるような方法を考えてみよう。

続きを読む →

Xy-picとdvisvgm

3件の返信

LaTeXで図式を書くのに、Xy-picというパッケージがある。このパッケージで書いた図式を、dvisvgmコマンドでSVG形式に変換しようという話。

大まかな流れ：

  1. Xy-picで作った図式を含むLaTeXソースをコンパイルしてDVIファイルを作る。
  2. DVIファイルをdvisvgmコマンドでSVG形式に変換する。

今回ハマったポイント（結論）：

  • Xy-picにはPostScriptやPDFなどのバックエンド（ドライバー）を指定しよう。
  • dvisvgmに--no-fontsを指定することでSVGファイルの文字を正しく表示できるようになる。

以下、結論に至るまでの過程： 続きを読む →

SVG pathの楕円を描くコマンドが使いにくい

コメントを残す

SVGとはScalable Vector Graphicsの略で、2次元のベクター画像を記述するためのXMLベースの言語である。詳しくはググれ。

ベクター画像を構成する要素は、線分とか円とかベジエ曲線とかいろいろある。SVGでこれをどう表すかというと、例えば線分だとline要素を使い、円だとcircle要素を使う。SVGにはこの他にpath要素というものがあって、描画のコマンドを文字列で指定して複雑な曲線を描ける。線分とか円の弧のような単純なやつも描ける。

例を見てみると、

M 100 100 L 300 100 L 200 300 z

というコマンドを与えると、始点(100,100)から(300,100)に線分を描き、そこから続けて(200,300)に線分を描く。最後に、(200,300)から始点に線分を描いてパスを閉じる。この M とか　L とか z とかいうのが描画コマンドで、それぞれ move to, line to, close path を意味する。2次元の描画を行うプログラムの経験がある人にはおなじみだろう。

描画コマンドには他にも2次あるいは3次のベジエ曲線を描くもの、楕円の弧を描くものがある。この楕円の弧を描くコマンド（A / a）が曲者で、楕円の指定方法が個性的だった。

このコマンドに与えるパラメーターは、楕円の形状に関する物が3つ、弧の終点（始点は current point を使うので、わざわざ指定する必要はない。指定したい場合は先に move to コマンドを実行する。）、そして、弧の端点と楕円の位置関係を指定するフラグが2つだ。楕円の中心は明示的に指定できない。

フラグが2つもある時点で嫌な予感がする。場合分けとか面倒くさそう。そんなことを感じながら、自前のSVGを出力するライブラリ（と言ったら大げさか）を実装・バグ取りしていたが、なぜか円全体が描けない。おかしい。と思ったが気が付いた。

始点と終点が一致していると、楕円の中心が一意に定まらない。つまり、SVG pathの A コマンドでは1回で楕円を描けない。SVGの楕円に類する物を描く描画コマンドは他にないのに…。

ググってみたら、Stack Overflowの質問を見つけた。
Circle drawing with SVG’s arc path – Stack Overflow
要するに、SVG pathで楕円全体を描くには、楕円の99.99%の弧を描いて満足するか、2個のコマンドで楕円を分割して描かないといけない。腐った仕様だ。

ちなみに、PostScriptの仕様をちらっと見た感じでは、PostScriptで円弧を描く arc コマンドは円の中心と半径、始点と終点の角度を指定する仕様だった。HTML5 Canvasの2D Contextも同様だ。（これらには楕円を描くコマンドはないが）

Five LemmaのダイアグラムチェースをするWebページを作った

コメントを残す

最近、Webの標準技術であるSVGとMathMLを組み合わせて、Webページ上で数学の図式などを表現できないかと考えている。

このブログでもたまに図式や証明図を載せているが、今までのは画像として貼り付ける形だった。静的なコンテンツならこれでもいいのだが、JavaScriptを使ってインタラクティブなコンテンツを作ろうとした時に、画像では動的に内容を変えるというようなことがやりにくい。そこで考えられるのが、Web標準技術のSVGやMathMLといった、HTMLやJavaScriptと相性のいい技術を使って数学の図式を記述するということである。

SVGは基本的に図を記述する言語で、MathMLは数式を記述する言語だが、ブラウザが対応していれば、SVGの図の中にMathMLを埋め込むことは難しくない。だが、数式の幅、高さを見ながら図のレイアウトを決めてやるのは正直楽しい作業ではない。JavaScriptを使えば、ブラウザがレンダリングした数式の大きさを見て適切に位置を合わせるということができるだろう。また、JavaScriptを使えば、ユーザーのクリックに反応して数式を変えたり、色を変えたりできるだろう。

SVGは最近のブラウザならだいたい対応しているが、MathMLのブラウザ側の対応はまちまちである。Firefoxはかなり昔からMathMLに対応していた。Safariは最近対応したようだが、筆者はあまり触っていない。Chromeは、数年前に見聞きした話では対応する意思がないらしい。

という感じで、とりあえず作る時はFirefoxで表示させることを優先させる。Safariは余力があれば対応させたい。Chromeは知らん。

というわけで、そういうのを実験的に実装してみた。このページは、みなさんお世話になっているであろう圏論的な直積の図式を表現している。

直積の図式を表示てきたはいいものの、これは動きがない。ユーザーの操作によって表示が変わるようなものを作ろう。というわけで、Five Lemmaのダイアグラムチェースによる証明(真ん中の射がmonicであることを示す)をするページを作った。クリックするとダイアグラムチェースが進む。かなりやっつけな書き方をしているので、例えばAndroid上のFirefoxでは表示が崩れた。Safariでは文字が途切れる。JavaScriptのソースコードもかなり汚い。改善の余地は大きいだろう。

演算子オーバーロードのないJavaScriptであまり複雑なことをしても記述性が悪い。例えばHaskellのような言語で記述してJavaScriptにコンパイルするという手順を取ると良いのかもしれない。