画像をSVGを利用して表示することは前々からの課題でした. ただ,以前テストしたときは,モニターの表示はきれいでも,印刷するとジャギーがでていました. それから,SVGのタグがMathML以上に複雑で,手に負えないというのも敬遠した理由でした. しかし,HTML5が出てから,ブラウザの対応もよくなってきたようだし, めんどうだからと逃げていてもしかたがない,という気持ちもでてきました. そこで,試しに作ったのがこのページです. 試しに印刷してみると,拡大してもジャギーのないきれいな画像になります. いままで,gifで作っていましたが,これだけきれいならSVGにする価値はありそうです.
ただし,FireFox2や3では,2番目のobjectタグで貼付けたときだけ,きちんと表示できるようです. また,Macでも同様です. 実際にSVGにきりかえるのは,そうしたものでの検証をしたうえで, ということで,あるいは,ユーザの大多数が新しいバージョンになってから, ということでもうしばらく先にしたいと思います.
以下に,同じ画像を違う方法で表示してみました. 私としてはHtml内部にSVGをじかに記述する方法がいいかな,と思っています. なお,画像の中の式も文字も,すべてMathMLを使っています. SVGの中でMathMLがきちんと表示されているのがわかると思います. これこそ,Texでやろうとするとめちゃくちゃ大変ですよね.
なお,svgをgifにしたものは次の画像(文字ははいっていませんが)です.
同じ画像をsvgにしたものが下に出てくるはずです.
次の図はimgタグで貼り付けています.図の中の文字が選択できません. 式はすべてMathmlです. 拡大したときに、ジャギーが気になる場合があります. この方法はやめたほうがよさそうです. しかも,WindowsのFireFox5では表示できますが,Macでは出ません.
↓ここに画像があります
次の図は上と同じsvgファイルをobjectタグで貼り付けています. 図の中の文字や式も選択できます.これだとMacのFireFox5でも出るようです. FireFox4だとだめですが. ジャギーはでません.印刷してもきれいです.
↓ここに画像があります.
次の図はhtmlの中に直接svgを書き、さらにその中にMathmlの式を入れています. 図の中の文字や式も選択できます. ジャギーはでません. ただ、残念なことに、htmlvalidaterでソースを見るとsvg以下のタグでエラーの指摘がされます. 回避する方法がわかりません.ご存知の方,教えてください! それから,これもMacだと見えません. 私としては,このやり方が一番いいと思うんですが・・・
↓ここに画像があります(式だけが表示されている場合,SVGの中のMathMLだけが表示されています).
実はこのページ,mathjaxにも対応してあります. safariとかで一部式が表示されているのはそのせいです. でも,SVGの表示は思いのほか厳しいようですね.
以上2011/7/8
下のリンクはmathjaxのテストページです.