SVG、SVGFont(工事中)

1.1 概要

SVGとはScalable Vector Graphicsの略称である。XMLによって記述され、ベクターグラフィックスを表現することが可能。このため単純な画像であれば割りと少ない情報量で表現することができる。またXMLで記述されるためにテキストエディタで編集することも可能である。完全な画像ではないために中に文章を埋め込むことも可能である。似たようなものにVMLある。

1.2 実験内容

ビルマ文字のアウトラインを曲線データに変換しイメージとしてSVGで表現する。

1.3 使用ファイル、プログラム、環境

ja: OpenOffice.org2.1のダウンロード
http://ja.openoffice.org/download/2.1/index.html

MyaZedi Myanmar Unicode
http://www.myazedi.com/

WindowsXP HomeEdition
http://www.microsoft.com/japan/windowsxp/default.mspx
InternetExplore 6.00
http://www.microsoft.com/japan/windows/ie/default.mspx
Web Center Features - SVG - Manual Download
http://www.adobe.com/jp/svg/viewer/install/
Mozilla FireFox 2.0.0.1
http://www.mozilla-japan.org/
Opera 9.1.0
http://jp.opera.com/

TeraPad
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

1.4 方法

イ：MyaZediフォントをインストールする。
ロ：OpenOfficeのDraw（図形絵画）を開く。
ハ：ビルマ文字をテキスト入力する。今回はကခဂဃငစを貼り付けした。文字が表示されない場合は入力欄をダブルクリックしてフォントをMyaZediに変える。
ニ：右メニューの変換から曲線に変換を選択。
ホ：メニューバーのファイルからエクスポートを選択してファイル書式をSVGにしてから保存する。

1.5 結果

MyaZediフォントのアウトラインを絵画したSVGファイル：

各ブラウザの動向：

1.6 考察

1.7 参考

Scalable Vector Graphics (SVG) 1.1 Specification
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/
SVGで画数の多い漢字 - 徒書
http://www.akatsukinishisu.net/itazuragaki/id/complicated_kanji_by_SVG

2.1 概要

SVG 1.1 仕様書（参考1）にあるSVGFontはSVG内のテキストに対して任意のフォントデータを提供する仕組みである。これはSVG内にフォントのアウトラインデータを埋め込むことで、テキストのフォントとして使用可能になる。これを表示させるにはSVG 1.1に対応したプログラムが必要となる。

2.2 実験内容

オープンソースプロジェクト"The Apache XML Project"から公開されている「Batik」のデモプログラムを使用してTrueTypeフォントからSVGフォントへコンバートする。テキストにSVGフォントをフォントに指定してIE、Mozillaなどのいくつかのブラウザで確認を行う。

2.3 使用ファイル、プログラム、環境

（プログラムはJavaで書かれているためJavaが動作する環境を用意する必要がある。もし用意していないのであれば以下のサイトよりJ2SE Java Runtime Environmentをダウンロードしインストールする。）

ダウンロード Java 2 SDK, Standard Edition, v 1.4.2_13 (J2SE)
http://java.sun.com/j2se/1.4.2/ja/download.html

Index of /mirror/apache/dist/xml/batik　batik-1.6.zip
http://ftp.yz.yamagata-u.ac.jp/pub/network/apache/xml/batik/batik-1.6.zip

MyaZedi Myanmar Unicode
http://www.myazedi.com/

TeraPad
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

2.4 方法

イ：Adobe SVG Viewerをインストールする。
ロ：Batikをダウンロードして解凍する。
ハ：同じフォルダにMayaZediフォントを解凍する。フォントをインストールする必要はない。
ニ：コマンドプロンプトを起動し、ダウンロードしたBatikを解凍したディレクトリに移る。
ホ：以下のコマンドを入力する。 batik-ttf2svg.jar <ttf-path> [-l <range-begin>] [-h <range-end>] [-ascii] [-id <id>] [-o <output-path>] [-testcard]

<ttf-path> はコンバートする文字を含むTrue Typeフォントファイルを指定。
[-l <range-begin>] [-h <range-end>] はSVGにコンバートされる文字範囲の最小値と最大値を指定。 Unicodeの範囲を指定する必要がある。範囲を特定するには参考１のサイトを参照する。これは16進数なので10進数に直して使用する。
[-ascii] はASCII文字マップを強制使用する。
[-id <id>] は生成された<font>要素の値を指定。
[-o <output-path>] はSVGフォントファイルが生成されるパスを指定。
[-testcard] は、SVGの <text> 要素の集合がSVGフォントファイルに追加されて、そのSVGフォント中の文字を視覚化してテストする、ということを指定します。これは生成されたSVGフォントファイルを視覚的に検証する簡単な方法を提供してくれます。

今回は
batik-ttf2svg.jar MyaZedi06.ttf -l 4096 -h 4255 -id MyaZedisvg -o svgtest.svg
と入力した。
ヘ：作成されたSVGファイル(svgtest.svg)をメモ帳で開いて一番下の</defs>タグと</svg>の間に以下のコードを挿入する。

<g style="font-family:MyaZedi; font-size:18;fill:black">
<text x="20" y="100">&#x1000;&#x1001;&#x1002;&#x1003;&#x1004;&#x1005;</text> 
</g>

ト：TeraPadでSVGファイルを読み込んでメニューバーのファイル＞文字/改行コード指定保存をクリックする。文字コードにUnicodeを選択し、改行コードにCR＋LFを選択してOKを押す。

2.5 結果

MyaZediフォントを埋め込んだSVGファイル：http://www.geocities.jp/project_the_tower2/svgtest.svg

各ブラウザの動向：
AdobeR SVG Viewer + IE は表示可能であった。Mozillaは「この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。」とエラーメッセージが返された。Operaはフォントがあてがわれなかったため字体は表示されなかった。

2.6 考察

SVGFontはSVG1.1に対応しているプログラムであれば正しく表示されるはずである。しかしながら対応していても正しく表示されないソフトウェアは多い。

2.7 参考

Scalable Vector Graphics (SVG) 1.1 Specification
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/
Unicode
http://web.hc.keio.ac.jp/~fujimura/lang/unicode.html
SVGについて
http://www.oersted.co.jp/~emk/2003/12/svg.html
SVG Fonts - Create Wiki
http://www.oersted.co.jp/~emk/2003/12/svg.html

戻る