SVG において、テキストも基本図形と同様に一種のグラフィックスオブジェクトとして扱われます。 そのため、テキストが描画されるタイミングや座標などの概念は基本図形の要素と同じです。
テキストを表示するには text 要素を記述し、要素の内容に対して描画したいテキストを指定します。 テキストが描画される位置は x 属性と y 属性で定義します。 英語や日本語であれば、テキストの左側ベースラインを軸に描画されるでしょう。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="20" y="20">ごきげんよう。</text> </svg>
テキストの座標にはカレントポジションという概念があります。 カレントポジションはテキストの現在の位置を表す座標で、x または y 座標が省略されている場合、代わりにこのカレントポジションに設定されている値が利用されます。 初期のカレントポジションは text 要素の x 及び y 属性で決定されます。
グリフ（個々の文字）は、text 要素に指定された x と y 座標から 1 文字ずつ相対的に調整されながら描画する位置を決定します。 つまり、グリフの位置はカレントポジションで決定されるのです。 デフォルトでは、視覚的に不自然さがないように文字と文字の間に一定のマージンが入る程度で調整されるでしょう。
各グリフの位置を明示的に指定したい場合、絶対座標で指定する方法と相対座標で指定する方法があります。 絶対座標で指定する場合はカレントポジションを用いずに x 属性及び y 属性を使って指定することができます。 通常 x や y 属性はテキストの描画を開始する座標のみを指定しますが、各グリフの絶対座標を指定したい場合は各グリフの座標をリストとして指定することもできるのです。 x や y 属性に整数のリストを指定した場合、個々のグリフの絶対座標となります。
整数のリストはカンマ、または空白文字で区切り、各整数が各グリフに対応します。 リストの値よりもグリフの数が多い場合、それ以降はカレントポジションを調整して自動的にグリフの位置が決定されます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="20 40 60 100 150 180 200" y="20 25 30 40 60 80"> ごきげんよう。 </text> </svg>
このサンプルの text 要素の x と y 属性は、テキストの初期位置だけではなく、整数リストを指定して個々の文字（すなわちグリフ）の絶対座標を明示的に指定しています。 これらは、個々のグリフのカレントポジションを絶対座標で明記しているということになります。
グリフの位置を決定するカレントポジションから相対的に座標を指定することも可能です。 この記述方法を採用すれば直前のグリフから相対的な座標でグリフの位置を指定することができるようになります。 カレントポジションから相対的に X 座標を指定するには dx 属性を、Y 座標を指定するには dy 属性を指定します。 x 属性や y 属性同様に、これらの属性にも整数のリストを指定することができます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="20" y="20" dx="0 20 40 10 30 50" dy="0 5 10 20 -10 40 -50"> ごきげんよう。 </text> </svg>
このようなグリフの座標制御は、文字を重ね合わせるなどの演出に利用することができます。
text 要素は、各文字に対して追加回転を与える rotate 属性を指定することができます。 これを指定することで、テキストの角度を変更することができます。 rotate 属性も x や y 属性と同様に、グリフに対応する整数リストを指定することができます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="20" y="20" rotate="-40 40 -30 30 20 90"> ごきげんよう。 </text> </svg>
他にも、テキストには様々なプロパティが存在し、より複雑な描画特性はプロパティで指定しなければなりません。 テキストの方向はデフォルトで左から右に流れるよう、カレントポジションが調整されます。 しかし、アラビア語やヘブライ語を扱う場合は右から左へ、日本語や中国語を扱う場合は上から下へ流れるテキスト表現が必要になります。
テキストの方向は writing-mode プロパティ で設定します。 このプロパティは text 要素にのみ指定することができ、テキストの方向を左から右, 右から左, 上から下へのいずれにするかを指定することができます。 lr-tb または lr を指定した場合は左から右へ、rl-tb または rl ならば右から左へ、tb-rl または tb ならば上から下へテキストが流れます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="350" y="0" writing-mode="tb-rl"> 「ごきげんよう」 </text> <text x="330" y="0" writing-mode="tb-rl"> 「ごきげんよう」 </text> <text x="310" y="5" writing-mode="tb-rl"> さわやかな朝の挨拶が、澄み切った青空にこだまする。 </text> </svg>
ただし、上から下に流れる日本語や中国語のテキストの場合は新しい問題が生じます。 テキストの中にアルファベットなどのラテン語系文字が含まれている場合、この文字を表示する角度をどうするかという問題があるでしょう。 横に回転させて表示させたい場合もあれば、そのまま自然に縦に表示するという方法も考えられます。
writing-mode が rl-tb または rl の状態にのみ有効になる glyph-orientation-vertica プロパティを使うことによって、この問題を解決することができます。 glyph-orientation-vertica プロパティにはデフォルトである auto が設定されています。 auto の場合、全角文字はグリフ方位を 0 に、半角文字は 90 に設定されます。 auto 以外の値を設定する場合は 0、90、180、270 のいずれかの角度に制限されています。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="350" y="10" writing-mode="tb-rl" glyph-orientation-vertical="90"> ひざの上の同居人〜Kitty on your lap〜 </text> <text x="330" y="10" writing-mode="tb-rl" glyph-orientation-vertical="auto"> ひざの上の同居人〜Kitty on your lap〜 </text> <text x="310" y="10" writing-mode="tb-rl" glyph-orientation-vertical="0"> Blue Blue Glass Moon </text> <text x="290" y="10" writing-mode="tb-rl" glyph-orientation-vertical="180"> Under the Crimson Air. </text> </svg>
同様に、横書きのテキストに対しては glyph-orientation-horizontal プロパティでグリフの方位を定めることができます。 このプロパティには auto という値は存在せず、0、90、180、270 のいずれかを指定しなければなりません。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="10" glyph-orientation-horizontal="90"> ごきげんよう、お姉さま。 </text> <text x="10" y="30" glyph-orientation-horizontal="180"> ごきげんよう、お姉さま。 </text> <text x="10" y="50" glyph-orientation-horizontal="270"> ごきげんよう、お姉さま。 </text> <text x="10" y="70" glyph-orientation-horizontal="0"> ごきげんよう、お姉さま。 </text> </svg>
フォントのスタイルやサイズなどの性質は CSS2 で定義されているプロパティで設定することができます。 テキスト関連要素に指定できる CSS2 プロパティは font-family、font-style、font-variant、font-weight、font-stretch、font-size、font-size-adjust、及び font です。 これらのプロパティの正式な定義は CSS2 で与えられています。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" font-size="30" font-style="italic"> Kitty on your lap </text> </svg>
このサンプルを表示すると、フォントサイズが 30 で斜体のテキストが描画されるでしょう。
一連のテキストの一部分だけを調整したい場合、text 要素の内部に子要素として tspan 要素を指定します。 例えば、テキストの中間部分だけプロパティを変更したり、カレントポジションを相対座標で変更したいという要求がある場合、text 要素を区切って記述するよりも、内部に tspan 要素を配置した方が構造的に扱いやすいでしょう。
tspan 要素の性質はほぼ text 要素と同じで、text 要素限定と明記された属性やプロパティ以外であれば、text 要素と同じ属性やプロパティを使うことができます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="50"> 私が<tspan font-size="30">殺す</tspan>。 <tspan dx="-50" dy="20"> 私が<tspan font-size="24" dy="5 10 10">生かす</tspan>。 </tspan> <tspan dx="-150" dy="70 -5 -10 -10 -10"> 私が<tspan font-size="35">傷つけ</tspan> </tspan> <tspan dx="-50" dy="30 10 10 10 20"> 私が<tspan font-size="25">癒す</tspan>。 </tspan> </text> </svg>
このように、テキストの途中でプロパティを変更したり、カレントポジションなどの座標を絶対的、または相対的に変更したりすることができます。 tspan 要素が終了した時点で、再び親要素の性質に復帰するため、テキストの途中で属性やプロパティを調整したい場合に利用することができます。