6.テキスト

文字列を表示する場合には、テキスト（text）タグを使う。
テキストを表示するためには、text タグを使う。text タグではHTML 形式と違って、座標を指定しないといけない、 自動で折り返してくれないなどと、いくつかやっかいな部分がある。
これは、SVG 1.2 になると、解消される。（Windows + Internet Explorer の場合は、Adobe 社がプラグインを アップデートしたときになる）

<text x="10" y="30">default</text>
<text x="20" y="50" font-size="20">This is SVG world.</text>
<text x="20" y="80" font-size="20">Tomoaki Masuda</text>

<text x="10" y="110" font-family="Comic Sans MS">Comic Sans MS</text>
<text x="20" y="130" font-size="20" font-family="Comic Sans MS">This is SVG world.</text>
<text x="20" y="160" font-size="20" font-family="Comic Sans MS">Tomoaki Masuda</text>

SVG では日本語を表示することができる。というより、Unicode が基本になる。
SVG ファイルの先頭に <?xml version="1.0" encoding="utf-8"?> にある encoding 属性に 文字コードを指定している。
UTF-8 や Unicode を扱えるエディタを使えば容易に日本語が扱える。 また、UTF-8 を扱えなくても Windows 2000/XP の場合には、メモ帳で文字コードを指定することが できるので、ここで「UTF-8」で保存すればよい。

<?xml version="1.0" encoding="utf-8"?>
<svg xml:space="default" height="200" width="300">

<text x="10" y="110">日本語</text>
<text x="20" y="130" font-size="20" font-family="MS UI Gothic">コレハ SVG ノ 世界 テス。</text>
<text x="20" y="160" font-size="20" font-family="MS UI Gothic">増田 智明</text>
</svg>

実際には、カタカナ文字を○で囲んだ文字が表示されているハズである。
ソースコードは、SJIS で記述しているので、カタカナにしてある。 SVG のファイルでは、文字コード表から直接コピーして作成している。
韓国語のフォントがあれば、font-family 属性で指定することによって表示することができるだろう。

表示位置

テキストの表示位置（x,y）は、文字の左下が原点になる。いわゆるベースラインの上に文字が描かれる ことになるので、矩形などその他の図形とは異なるので注意が必要だ。
たとえば、矩形の中に表示する場合には、表示位置（x,y）が右下になる。

<text x="20" y="60" font-size="60" font-family="Comic Sans MS" fill="gray">
    SVG
</text>
<text x="20" y="140" font-size="60" font-family="Comic Sans MS" fill="gray">
    123
</text>

ワープロソフトで行う、右揃え、センタリング、左揃えを指定することができる。 揃え（text-anchor）属性を使って、右揃え（start）、センタリング（middle）、左揃え（end）を 指定する。left, center, right ではないのは、縦書きやアラビア文字のように右から左に書く 文化を意識したものである。

<text x="140" y="40" font-size="20" text-anchor="start">
    start
</text>
<text x="140" y="80" font-size="20" text-anchor="middle">
    middle
</text>
<text x="140" y="120" font-size="20" text-anchor="end">
    end
</text>

複数行の表示

SVG 1.1 の勧告では、いわゆる「文章の流し込み」をすることができない。 これは、SVG を実装するベンダーに負担がかからないように、より実装しやすい形に 留めておくため、禁則文字などの折り返しは難しいと判断したためである。
このため SVG 1.2 では、組版を強く意識し、文章の流し込みをサポートしている。
なので、ここで使う tspan タグを使った複数の文章は、暫定的でしかないのだが、 文字ごとに位置を指定したりすることが可能なので、覚えておいて損はないだろう。

<text x="40" y="40" font-size="20">
    <tspan>The old pond;</tspan>
    <tspan x="40" dy="40">A frog jumps in, --</tspan>
    <tspan x="40" dy="40">The sound of the water.</tspan>
</text>

tspan タグでは、それぞれの開始位置（x,y）と、相対位置（dx,dy）を指定する。
相対位置は、最終のカーソル位置（文字の描画位置）から、どの程度ずらすか、という指定になる。
この例のように複数行をシュミレートしたい場合は、x 属性で開始位置をリセットして、dy 属性で 行送りの幅を指定するとよいだろう。最初の行には、特に属性を指定しないので、注意が必要だ。

日本語のフォントを使い、書き方向（writing-mode）を縦書き（tb-rl）で指定すれば、 縦書きの文章を書くことができる。

<text x="240" y="40" font-size="20" writing-mode="tb-rl">
    <tspan>古池や</tspan>
    <tspan y="40" dx="-40">かわず飛び込む</tspan>
    <tspan y="40" dx="-40">水の音</tspan>
</text>

ここでは、font-family を「ＭＳ 明朝」で指定しているが、Adobe 社のプラグインでは、 デフォルトのフォント（MS UI Gothic）が使われる。これは、font-family の指定で、 日本語が通っていないためだ。
この場合には、「MS Mincho」のように英語名（アルファベット）のほうを使うと認識される。

<g font-family="MS Mincho">
    <text x="240" y="40" font-size="20" writing-mode="tb-rl">
        <tspan>古池や</tspan>
        <tspan y="40" dx="-40">かわず飛び込む</tspan>
        <tspan y="40" dx="-40">水の音</tspan>
    </text>
</g>

文字コード

文字コードに関しては、UTF-8 ではなく Unicode を使うこともできる。
先頭に、<?xml version="1.0"?> と記述することで、文字コードはデフォルトの Unicode を指定したことになる。

<?xml version="1.0"?>
<svg xml:space="default" height="200" width="300">
...
</svg>

通常の SVG を使っている場合には特に問題ないのだが、外部 JavaScript の読み込みを 利用すると Unicode の場合は問題がでる。JavaScript のコードを、Shift-JIS などで 書いた場合には、うまく動作しない。これは、JavaScript のコードを UTF-8/Unicode に してもうまく動作しないので、Adobe 社のプラグインの問題かもしれない。
コメント部分にも日本語を使うとうまくいかないので、動的に SVG を扱う場合には、 SVG に JavaScript を埋め込む方式を使うか、貼り付けてある HTML ファイルを通じて、 SVG を操作するとよい。
このあたりの工夫は、JavaScript の節で解説しようと思う。
next