SVGの基本的な要素: text要素(その2)

2002年3月17日(日)更新

■SVGの基本的な要素: text要素(その2)

たけち: まずは日本語テキストを表示させてみようね。どうすればいいと思う?

さらら: えぇ。日本語のフォントを指定すればいいのかしら?

たけち: そうそう。次のようにすればいいんだよ。サンプルのリストも載せておこうね。

さらら
  • MS 明朝: MS-Mincho
  • MS P明朝: MS-PMincho
  • MS ゴシック: MS-Gothic
  • MS Pゴシック: MS-PGothic
SVGドキュメント　サンプル(日本語テキストの表示)

?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="350" xmlns="http://www.w3.org/2000/svg">

  <desc>text element</desc>

  <desc>Example text02 - 'Hello' in blue</desc>

  <text x="200" y="40" font-family="Arial" font-size="14" >font-family="MS-Mincho"</text>
  <text x="20" y="80"
    font-family="MS-Mincho" font-size="40" fill="green" >
    これは日本語です
  </text>

  <text x="200" y="120" font-family="Arial" font-size="14" >font-family="MS-PMincho"</text>
  <text x="20" y="160"
    font-family="MS-PMincho" font-size="40" fill="navy" >
    これは日本語です
  </text>

  <text x="200" y="200" font-family="Arial" font-size="14" >font-family="MS-Gothic"</text>
  <text x="20" y="240"
    font-family="MS-Gothic" font-size="40" fill="green" >
    これは日本語です
  </text>

  <text x="200" y="290" font-family="Arial" font-size="14" >font-family="MS-PGothic"</text>
  <text x="20" y="330"
    font-family="MS-PGothic" font-size="40" fill="navy" >
    これは日本語です
  </text>

</svg>

たけち: これを"text_2.svg"という名前のファイルにして、"text_2.html"からリンクして表示させると次の図のようになるね。
あっ、そうそう。この"text_2.svg"を保存するときには、文字コードを"UTF-8"にしておいて。日本語の文字が入っているから。

さらら: あっ、そうなんだぁ。

text要素のサンプルファイル text_2.html
viewportのサイズは、400px×350pxです。

※Adobe社のSVG Viewerがインストールされていると下のイメージのように表示されるはずです。

Adobe社のSVG Viewerがインストールされているとこのように表示されるはずです。

■日本語テキストの縦書き

さらら: 日本語が表示できるんだったら、縦書きしたいわねぇ〜。。。。 (^ ^*

たけち: あっ、できるんだよ。それは、"writing-mode"という属性を指定することでできるんだよ。ついでに関連の属性について図に載せておこうね。

さらら

text要素の各属性の意味(2)

text要素の各属性の意味(3)

さらら: 下線なんかも引けるのね。縦書きできるし・・・

たけち: じゃあ。サンプルを載せておこうね。早速、リストを見て。

さらら: えぇ。

たけち

■text要素のサンプル(3): 縦書き

SVGドキュメント　サンプル(日本語テキストの縦書き)

<?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

  <desc>text element</desc>

  <desc>Example text03 - poem</desc>

  <text x="340" y="20"
       font-family="MS-Mincho" font-size="30" fill="navy" writing-mode="tb" >
春過ぎて
  </text>

  <text x="260" y="40"
      font-family="MS-Mincho" font-size="30" fill="navy" writing-mode="tb" >
夏来るらし<tspan fill="green">白栲</tspan>の
  </text>

  <text x="280" y="190"
      font-family="MS-Mincho" font-size="16" fill="navy" writing-mode="tb" >
しろたへ
  </text>

  <text x="180" y="40"
      font-family="MS-Mincho" font-size="30" fill="navy" writing-mode="tb" >
衣干したり天の<tspan fill="green">香具山</tspan>
  </text>
  <text x="200" y="260"
      font-family="MS-Mincho" font-size="16" fill="navy" writing-mode="tb" >
か<tspan dy="10">ぐ</tspan><tspan dy="6">やま</tspan>
  </text>

  <text x="100" y="240"
      font-family="MS-Mincho" font-size="24" writing-mode="tb" >
持統天皇
  </text>
  <text x="118" y="248"
      font-family="MS-Mincho" font-size="12" fill="navy" writing-mode="tb" >
じ<tspan dy="5">とうてんのう</tspan>
  </text>

</svg>

さらら: あら。私の歌ね。。。。ところで、tspanってなぁに?

たけち: あっ、そうだ。tspanっていうのは、text要素の子要素として使えるんだけど、その個所の文字フォントを変更したり、文字の色を変更したり、位置をずらしたりするときに使うんだよ。

さらら: そうなんだぁ。

たけち: tspanの主な属性を図に載せておこうね。

tspan要素の各属性

たけち: じゃあ、さっきのテキストを文字コードを"UTF-8"で"text_3.svg"という名前のファイルにして、"text_3.html"からリンクして表示させると次の図のようになるね。

text要素のサンプルファイル text_3.html
viewportのサイズは、400px×400pxです。

※Adobe社のSVG Viewerがインストールされていると下のイメージのように表示されるはずです。

Adobe社のSVG Viewerがインストールされているとこのように表示されるはずです。

さらら: なかなかそれらしく見えるものね。うれしいわ。tspanで、白栲・香具山の文字の色を"green"にしているのね。それと、ルビのところの文字の位置をtspanのdy属性でずらしているのね。

tspanの使用例

たけち: そうそう。だいたい一通りのことをやったと思うから、基本的なところは今回でおしまいにしようね。

さらら: お疲れさま。ありがと。

次回からはもう少し応用的なことを学びましょう。 .... (^ ^*

■補足: "text_2.html"と"text_3.html"ファイルの内容は次のようです。

"text_2.html"ファイルの内容

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>SVGのtext要素の例(1)です</title>
  </head>
  <body>
    <p>SVGのtext要素の例(2)です。<br />各要素のfont-family属性を色々と変えています。</p>
      <embed src="text_2.svg" name="SVGEmbed" width="400" height="350" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

  </body>
</html>

"text_3.html"ファイルの内容

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>SVGのtext要素の例(3)です</title>
  </head>
  <body>
    <p>万葉歌の例です。</p>
      <embed src="text_2.svg" name="SVGEmbed" width="400" height="400" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

  </body>
</html>