文字だって描ける - SVGテキスト入門

文字だって描ける - SVGテキスト入門 `<text>`

SVGは図形を描くだけでなく、リッチなテキスト表現も得意です。SVGで描かれたテキストはベクターデータなので、どれだけ拡大・縮小してもギザギザにならず、常にシャープで美しい表示が保たれます。さらに、通常のHTMLテキストと同様に、検索エンジンに認識されたり、ユーザーが選択してコピーしたりすることも可能です（設定によります）。

このページでは、SVGでテキストを表示するための基本要素 <text> と、その仲間たち <tspan> や <textPath> の使い方、そして多彩なスタイリング方法について学んでいきましょう。

`<text>` 要素の基本

SVGでテキストを配置するには、<text> 要素を使います。主な属性は以下の通りです。

x: テキストのベースライン（文字が乗る線）の始点のX座標。
y: テキストのベースラインの始点のY座標。
テキストの内容: <text> と </text> タグの間に直接記述します。

x や y にカンマやスペース区切りで複数の値を指定すると、各文字の位置を個別に設定することもできますが、通常は後述する <tspan> 要素を使う方が柔軟です。

基本の`<text>`デモ

表示テキスト:

x座標: 20

y座標: 50

<svg width="100%" height="150" viewBox="0 0 400 150">
  <text x="20" y="50">こんにちは SVG!</text>
</svg>

テキストのスタイリング

<text> 要素も、図形要素と同じように fill（文字色）、stroke（縁取りの色）、stroke-width（縁取りの太さ）などの属性でスタイルを指定できます。それに加えて、フォント関連のプロパティも重要です。これらのプロパティはCSSでも指定可能です。

font-family: フォントの種類を指定します (例: "Arial", "游ゴシック体, YuGothic, sans-serif")。
font-size: フォントの大きさを指定します (例: "24", "1.5em")。
font-weight: フォントの太さを指定します (例: normal, bold, 700)。
font-style: フォントのスタイルを指定します (例: normal, italic)。
text-decoration: テキストの装飾を指定します (例: underline, line-through)。CSSでは一般的ですが、SVG属性としては非標準の場合があります。CSSでの指定が推奨されます。

テキストスタイリングデモ

テキスト:

font-family:

font-size: 30

font-weight:

font-style:

fill (文字色):

stroke (縁取り色):

stroke-width: 0.5

テキストの配置と方向

`text-anchor` - 水平方向の揃え

text-anchor 属性は、x 座標に対してテキストをどのように配置するかを指定します。

start: (デフォルト) x 座標がテキストの開始位置（左端、または右横書きなら右端）。
middle: x 座標がテキストの水平方向の中央。
end: x 座標がテキストの終了位置（右端、または右横書きなら左端）。

`text-anchor` デモ

テキスト:

text-anchor:

x座標 (基準線): 200

`dominant-baseline` - 垂直方向の揃え

dominant-baseline 属性は、y 座標に対してテキストのどの部分を合わせるかをより細かく制御します。

auto: (デフォルト) 通常はアルファベットのベースライン。
middle: テキストの垂直方向の中央。
hanging: インド系言語などで使われる、文字がぶら下がる基準線。
central: middle に似ていますが、大文字の高さを基準にすることがあります。
他にも text-before-edge, text-after-edge, ideographic, alphabetic などがあります。

`dominant-baseline` デモ

テキスト:

dominant-baseline:

y座標 (基準線): 50

書字方向 (writing-mode) や縦書き時の文字の向き (text-orientation) などもCSSで制御できますが、ここでは割愛します。

`<tspan>` - テキストの一部分をスタイリング

<tspan> 要素は、<text> 要素の中で、テキストの一部分だけ異なるスタイルを適用したり、位置を細かく調整したりするのに使います。<tspan> は入れ子にすることも可能です。

x, y: 親の <text> 要素からの絶対位置、またはカンマ区切りで各文字の絶対位置。
dx, dy: 直前の文字からの相対的なオフセット（ずれ）。文字間の微調整に便利。
rotate: 各文字を個別に回転させます（度単位の数値リスト）。
その他、font-family, fillなどのスタイル属性も使えます。

`<tspan>` デモ

Tspan 1 テキスト:

Tspan 1 色:

Tspan 2 テキスト:

Tspan 2 dx: 0

Tspan 2 dy: 0

Tspan 3 テキスト:

Tspan 3 rotate (各文字): 0

`<textPath>` - パスに沿ったテキスト

<textPath> 要素を使うと、テキストを任意の曲線や直線などのパスに沿って配置することができます。

まず、<defs> 要素内にパスを定義し、id を付けます。
<textPath> 要素の href (または古いSVGでは xlink:href) 属性で、定義したパスのIDを参照します。
startOffset: パスの開始点からどれだけずらしてテキストを配置するかを指定します (例: "0%", "50%", "20px")。
method: テキストをパスにどう合わせるか (align: 文字間隔を調整, stretch: 文字を変形)。多くの場合 align。
spacing: 文字間隔の調整方法 (auto または exact)。

`<textPath>` デモ

表示テキスト:

startOffset: 0%

パス形状:

豆知識 (English/日本語)

Did you know? SVG text is real text, not just an image of text. This means it's selectable by users, can be copied and pasted, is accessible to screen readers, and is indexed by search engines. This provides significant advantages for both accessibility (a11y) and search engine optimization (SEO) compared to raster images of text.

知っていましたか？SVGテキストは単なる文字の画像ではなく、本物のテキストです。これは、ユーザーが選択してコピー＆ペーストでき、スクリーンリーダーにもアクセス可能で、検索エンジンによってインデックスされることを意味します。これにより、ラスター画像の文字と比較して、アクセシビリティ（a11y）と検索エンジン最適化（SEO）の両面で大きな利点がもたらされます。

まとめ

このページでは、SVGでテキストを表示し、豊かに表現するための様々な方法を学びました。<text>による基本的な配置から、フォントや色のスタイリング、<tspan>を使った部分的な調整、そして<textPath>によるパスに沿ったテキストまで、SVGテキストは非常に高機能です。

これらのテクニックを使えば、情報を伝えるだけでなく、デザイン性の高いテキスト表現もSVGで実現できます。次のページ「整理整頓と再利用 - g, defs, use, symbol, marker」では、作成した図形やテキストを効率的に管理し、再利用する方法について見ていきましょう。

このページの要約

日本語

SVGでは<text>要素を使ってベクターテキストを表示します。x, y属性で位置を指定し、font-family, font-size, fillなどでスタイルを設定できます。text-anchorやdominant-baselineで配置を調整可能です。<tspan>要素を使うと、テキストの一部分だけ異なるスタイルや位置を指定できます。<textPath>要素は、定義済みのパスに沿ってテキストを配置する機能を提供します。SVGテキストはスケーラブルで、アクセシビリティやSEOにも優れています。

English

SVG uses the <text> element to display vector text. Position is set with x and y attributes, and styling is applied using properties like font-family, font-size, and fill. Alignment can be adjusted with text-anchor and dominant-baseline. The <tspan> element allows styling or positioning portions of text. The <textPath> element enables text to flow along a predefined path. SVG text is scalable and offers benefits for accessibility and SEO.

Español

SVG utiliza el elemento <text> para mostrar texto vectorial. La posición se establece con los atributos x e y, y el estilo se aplica utilizando propiedades como font-family, font-size y fill. La alineación se puede ajustar con text-anchor y dominant-baseline. El elemento <tspan> permite aplicar estilos o posicionar porciones de texto. El elemento <textPath> permite que el texto fluya a lo largo de una ruta predefinida. El texto SVG es escalable y ofrece beneficios para la accesibilidad y el SEO.

中文

SVG 使用 <text> 元素来显示矢量文本。位置由 x 和 y 属性设置，样式通过 font-family、font-size 和 fill 等属性应用。对齐方式可以通过 text-anchor 和 dominant-baseline 进行调整。<tspan> 元素允许对部分文本进行样式化或定位。<textPath> 元素使文本能够沿预定义的路径流动。SVG 文本是可伸缩的，并为可访问性和 SEO 提供了优势。