SVGテストについて

 画像をSVGを利用して表示することは前々からの課題でした. ただ,以前テストしたときは,モニターの表示はきれいでも,印刷するとジャギーがでていました. それから,SVGのタグがMathML以上に複雑で,手に負えないというのも敬遠した理由でした. しかし,HTML5が出てから,ブラウザの対応もよくなってきたようだし, めんどうだからと逃げていてもしかたがない,という気持ちもでてきました. そこで,試しに作ったのがこのページです. 試しに印刷してみると,拡大してもジャギーのないきれいな画像になります. いままで,gifで作っていましたが,これだけきれいならSVGにする価値はありそうです.

 ただし,FireFox2や3では,2番目のobjectタグで貼付けたときだけ,きちんと表示できるようです. また,Macでも同様です. 実際にSVGにきりかえるのは,そうしたものでの検証をしたうえで, ということで,あるいは,ユーザの大多数が新しいバージョンになってから, ということでもうしばらく先にしたいと思います.

 以下に,同じ画像を違う方法で表示してみました. 私としてはHtml内部にSVGをじかに記述する方法がいいかな,と思っています. なお,画像の中の式も文字も,すべてMathMLを使っています. SVGの中でMathMLがきちんと表示されているのがわかると思います. これこそ,Texでやろうとするとめちゃくちゃ大変ですよね.

なお,svgをgifにしたものは次の画像(文字ははいっていませんが)です.

同じ画像をsvgにしたものが下に出てくるはずです.

SVGファイルをimgタグで貼付けた場合

 次の図はimgタグで貼り付けています.図の中の文字が選択できません. 式はすべてMathmlです. 拡大したときに、ジャギーが気になる場合があります. この方法はやめたほうがよさそうです. しかも,WindowsのFireFox5では表示できますが,Macでは出ません.

↓ここに画像があります

SVGファイルをobjectタグで貼付けた場合

次の図は上と同じsvgファイルをobjectタグで貼り付けています. 図の中の文字や式も選択できます.これだとMacのFireFox5でも出るようです. FireFox4だとだめですが. ジャギーはでません.印刷してもきれいです.

↓ここに画像があります.

HtmlにじかにSVGを記述した場合

次の図はhtmlの中に直接svgを書き、さらにその中にMathmlの式を入れています. 図の中の文字や式も選択できます. ジャギーはでません. ただ、残念なことに、htmlvalidaterでソースを見るとsvg以下のタグでエラーの指摘がされます. 回避する方法がわかりません.ご存知の方,教えてください! それから,これもMacだと見えません. 私としては,このやり方が一番いいと思うんですが・・・

↓ここに画像があります(式だけが表示されている場合,SVGの中のMathMLだけが表示されています).

x 1 y 3 2 r y= 3 2 x2

ついでにmathjaxにも対応してみました

 実はこのページ,mathjaxにも対応してあります. safariとかで一部式が表示されているのはそのせいです. でも,SVGの表示は思いのほか厳しいようですね.

以上2011/7/8

下のリンクはmathjaxのテストページです.

北大2011年

inserted by FC2 system