SVGの座標

2002年2月10日(日)更新


■SVGの座標(単位)

たけち: じゃあ、SVGドキュメントについて少し詳しく、少しずつだけど学んでいこうね。

さらら: は〜い。

たけち: まずは、単位についてみてみようね。

さらら: 単位って、ミリメートルとかそういうものね。

たけち: そうそう、SVGでは次のような単位が使えるんだよ。

さらら


SVGの単位

cm
センチメートルのことです。
em
現在使用しているフォントの大文字(M)の横幅を単位とします。
ex
現在使用しているフォントの小文字(x)の高さを単位とします。
in
インチのことです。1in(インチ)は、25.4mmに相当します。
mm
ミリメートルのことです。
pc
パイカのことで、12pt(ポイント)に相当します。
pt
ポイントのことです。1ptは、72分の1インチに相当します。
px
ピクセルのことです。画面に表示される最も小さな一つの点のことです。
%
パーセントのことです。現在の大きさ(長さ)に対して百分率で表した大きさ(長さ)のことです。

さらら: う〜ん・・・・ミリメートルとかセンチメートルとかは分かるけど、他にもいろいろな単位があるのね。

たけち: そうだね。これらは印刷やDTP(Desktop Publishing)などで使われていた単位がもとになっているようだね。これらは、XSL-FOのところでも役に立つからね。

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

さらら


■SVG Viewport(ビューポート)

たけち: 実際にSVGを表示するには、画面上のどこにどれだけの大きさの領域をとったらいいのかをきめてあげないといけないんだ。

さらら: あっ、お絵かきをするときの紙の大きさみたいなことをイメージすればいいのかしら。

たけち: そうだね。それを"SVGビューポート(Viewport)"っていうんだ。

さらら: へぇ〜。また、難しそうな言葉がでてきたわ。

たけち: 細かいことを言うとすごく難しいんだけど、とりあえずは余計なことは考えないで進めていこうね。"SVGビューポート(Viewport)"は、実際にSVGの内容が表示される領域、って覚えておこうね。ここでは画面上のピクセルの単位でその領域をとるように考えてみよう。

たけち

たけち: とにかくサンプルで見てみようね。ごく簡単な四角形と円をSVGで描いてみよう。図に載せておくね。あっ、そうそう。座標の原点は、左上で、x座標は右に、y座標は下に向かって正の値だからね。

さらら: へぇ〜。そうなんだ。

たけち: 紙にドキュメントを印刷することをイメージしてみるとわかりやすいと思うんだけど、左上から下に向かってプリントされるように紙が送られるよね。

さらら: そうね。でも、私にとっては右から左、が分かりやすいわ。。。。。なにしろ筆で書くんだもの。。。。 (^ ^;

たけち: さららの気持ちもわかるけど。

さらら

SVGの座標系

SVGドキュメント サンプル(四角形と円)
viewportのサイズは、500px×500pxです。

<?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="500" height="500" xmlns="http://www.w3.org/2000/svg">

  <desc>Rectangle and circle</desc>

  <rect style="fill:skyblue;" x="0" y="0" width="400" height="100" />
  <circle style="fill:yellow;" cx="200" cy="200" r="100" />

</svg>

たけち: これを"basic_1.svg"という名前のファイルにして表示させると次の図のようになるね。

四角と円のサンプルファイル basic_1.html
viewportのサイズは、500px×500pxです。

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

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

さらら: 幅が300pxで高さが300pxのviewportの中に四角と円が全部表示されているわ。

たけち: そうだね。もし、viewportがもっと小さかったら?

さらら: あっ、それはきっとviewportからはみ出すのね。

たけち: そうそう。確認のために、viewportのサイズを、幅が200pxで高さが200pxとしてみよう。リストと表示結果を次に載せるね。

さらら

四角と円のサンプルファイル basic_2.html
viewportのサイズは、200px×200pxです。

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

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


viewBox属性

さらら: あっ、本当だわ。四角形の右側と円の右半分と下半分も表示されないのね。これじゃぁ困るわね。。。。。画面の大きさって限られているし、「このサイズで表示したい」ってときにはどうしたらいいのかしら。

たけち: そうだね。このビューポートに合うようにするには二つの方法があるんだ。一つはviewBox属性で、もう一つはtransform属性なんだ。

さらら: あらら。またなんだか難しそうな・・・・

たけち: 今回は、viewBox属性について見てみようね。

さらら

たけち: viewBox属性は、viewportをどれだけの座標として扱うかを指定するんだ。

さらら: へっ??

たけち: たとえばさっきのサンプルだと、viewportは、200px×200pxだよね。一方、表示しようとするSVGの内容を見ると、最低でも400px×300pxは必要だよね。

さらら: そうね。四角形の幅が400pxあるし、円は、中心が(200,200)で半径が100pxだもんね。

たけち: だから、このsvgの内容を表示するためには、たとえば、viewportが400px×400pxあれば良いよね。それをviewBox属性で、SVGの内容の大きさから見て狭いviewportに合うようにするんだ。

さらら: というと・・・・縮小しちゃうのね。

たけち: そう考えていいね。具体的には次のように指定するんだ。具体的なイメージを図にも載せておくね。例としては、"xの最小値"と"yの最小値"の両方を"0"としておくね。ちなみに、"0"以外だと原点が移動しちゃうんだけど。

viewBox="xの最小値 yの最小値 幅 高さ"

viewBoxの説明

さらら: うんうん。なんとなくわかるわ。viewBoxで表示したい内容をviewportにうまく合うようにするのね。

たけち: じゃあ、次のこの図で示したviewBoxの例を載せておくね。

SVGドキュメント サンプル(四角形と円)
viewportのサイズは、500px×500pxです。

<?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="200" height="200"
  viewBox="0 0 400 400"
  xmlns="http://www.w3.org/2000/svg">

  <desc>Rectangle and circle</desc>

  <rect style="fill:skyblue;" x="0" y="0" width="400" height="100" />
  <circle style="fill:yellow;" cx="200" cy="200" r="100" />

</svg>

四角と円のサンプルファイル basic_3.html
viewportのサイズは、200px×200pxです。
viewBoxで、400px×400pxを指定しています。

※Adobe社のSVG Viewerがインストールされていると下のイメージのように
四角形と円がきちんとviewportにフィットされて表示されるはずです。

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

さらら: viewportとviewboxね。

たけち: あんまり難しく考えないほうが良いね。

さらら: えぇ。そうね。これからもっと具体的な図形をいろいろとみせてくれるのよね。そうでしょ。

次回はSVGの基本的な要素: rect(矩形)要素です。 .... (^ ^*

さらら


■補足: サンプルファイルは次のようにしています。

実際には、次のようにhtmlファイルからsvgファイルを指定しています。

<?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の基本的要素の例です</title>
  </head>
  <body>
      <embed src="ファイル名.svg" name="SVGEmbed" width="xxx" height="xxx" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">
    <p>※表示についてのコメント。</p>

  </body>
</html>