SVGで画数の多い漢字

SVG対応Mozillaユーザとしてはそれ向けのページを見てみたいものなのですが、そんなものがそうそう見つかるわけでもなく。なので自分で作ってみようと思い、最も画数の多い漢字とは？の漢字画像をXHTML埋め込みSVGでリライトしたものを作ってみました。

SVG対応Mozillaだと漢字もきちんと見れますが、その他のMozilla系ブラウザまたはOperaでは、svg:desc要素として記述した代替テキストが漢字の代わりに表示されます。

（追記）IE 5.5以上 + Adobe SVG Viewerでも埋め込みSVGを見れることを知ったので、text/htmlのページを追加しました（コンテントネゴシェーションにより振り分けられます）。あとそれに伴いURLも変更しました。

漢字画像のSVG版は以下のように作成。

  1. OpenOffice.orgの図形描画(Draw)を使って漢字をテキスト入力（フォントは今昔文字鏡フォントを使用）。
  2. 右クリックメニューで「変換」→「曲線に変換」。
  3. 「ファイル」メニュー→「エクスポート」でSVGとして保存。
  4. エディタで適当にマークアップを変更。
  5. (ﾟдﾟ)ｳﾏｰ

SVGのソースを見てみるとpath要素が数字列の嵐になってまして、人力ではとてもとても作成できるようなものではありません。げに有難きはOOoでございます。感謝。

埋め込みSVGを使ってみてよいと感じたのは、スタイルを外部CSSで調整できることでした。例えば当サイトは漢字画像を多く含むが故にスタイルを「背景色白・文字色黒」のままにしておかざるを得なかった※のですが、埋め込みSVGならスタイルに合わせて画像の色変更も思いのままであり、代替スタイルシートも使いたい放題できるわけですよ。対応ブラウザの普及が待たれるところです。

※ や、本当は恰好いいスタイルを作る能力がないからですが。

「最も画数の多い漢字とは？（XHTML + SVG版）」の漢字の色はstyle要素内で定義しているので、試しにスタイル切り替えで"Basic Page Style"にしてみると、漢字の色も変わるのが確認できます。

* * *

ということで、以上、application/xhtml+xmlでできることを模索してみた実験でありました。

参照文書

（2004年2月15日）

北村曉 kits@akatsukinishisu.net