welcome: please sign in
location: SVGデータと座標系

SVGデータと座標系

座標系

SVGにおける標準の座標系は左上隅を(0,0)とし、xが横方向、yが縦方向で、向きは図のようになります。


単位

単位としては次のものが使えます。単位を省略するとピクセルになります。


SVGデータの例

全体の構造を見てください。
SVG 要素の内容に、title要素の他に circle、 rect、 line の3つの要素が加わっています。これらの要素は単独タグで記述されています。それぞれの要素にはいろいろな属性がありますが style という属性はこの3つの要素のいずれにもあります。

circle要素

rect要素

line要素

style属性

要素をいくつか記述したときは、前に書いたものが先に、後ろに書いたものが後に表示されます。先に描かれた図形が残ったまま次の図形が描かれます。次々と重なっていきます。


SVGエレメント

SVGエレメントはSVGデータに必ず必要です。
これがルートエレメントであり、1つのデータに1つだけです。
他の要素はすべてSVGエレメントの内部に記述します。

xmlns および xmlns:xlink の2つの属性は名前空間の定義を行うもので、この通りに書きます。(この記述が無いとブラウザによっては表示されません)

他に通常記述する属性には width height veiwBox の3つがあります。


width, height

width でビューポートの幅を、height で高さを指定します。
ビューポートは画面上での表示領域を表します。

大きさは数値で指定します。
単位としては em(文字の高さが1)、px(画面上のドット)のほかにcm(センチメートル)、in(インチ)などが使えます。
単位を省略すると px になります。

のように書きます。


viewBox

viewBox はSVGで表示する範囲を指定します。

のように指定します。
値は順に、左上隅のx座標、y座標、横幅(座標値)、縦幅(座標値)です。

viewBoxの指定を省略したときは、左上隅を(0,0)とし、width, heightで指定された値と等しい座標範囲が表示されます。

と指定されviewBoxの指定がないときは

の意味になります。

左上隅の座標の指定は良く使います。

この例では画面上の表示領域は幅400、高さ300で、表示範囲も幅400、高さ300と同じになっています。 表示範囲の左上隅の座標を(-200,-100)と指定しています。 表示されるのはx座標は-200から200までの幅400、y座標は-100から200までの高さ300の範囲になります。

viewBoxで指定する幅や高さがwidth, heightで指定する量と異なるときは、 高さまたは幅をあわせるように拡大縮小されます。

viewBoxで指定した範囲を切り取って、widthとheightの大きさに合わせて表示すると考えるとよいでしょう。

下図は viewBox="a b c d" に対応します。


アスペクト比

width、heightの大きさとviewBoxでの幅と高さの比率が異なるときの処理については preserveAspectRatio 属性で指定することができます。

preserveAspectRatio="xMinYMin meet"

preserveAspectRatio="xMidYMax slice"

preserveAspectRatio="none"

SVGデータと座標系 (最終更新日時 2008-08-21 01:48:15 更新者 masahiko)