色々な四角形を作る-SVG言語をシンプル解説（第2回）

はじめに

今回は、「いろんな四角形を作成する」事を目的にしています。四角形に色を付けたり、角を丸めたり、線を付けていきます。今回の解説やサンプルを読んでいけば、形式すら知らない初心者の方でも、SVGに慣れていけるはずです。

前回のおさらい

前回では、エディターに以下の文章をコピーして、ブラウザに四角を描きました。そこで、まず、テキストエディターをご用意下さい。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100"/>
</svg>

上の文章をコピーして、ブラウザに表示させると、次のように、四角が描かれます。

では、これを元に、もっといろんな改造をして、様々なスタイルの四角を描いていきましょう。

色を変える

四角形の色を変えたい人は、前回のサンプルと同様に、以下の文章をコピーして上書きしてみてください。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" fill="red"/>
</svg>

「fill="red"」という言葉を付け加えましたので、黒い面の四角が赤（red)になっているはずです。ちなみにfill（フィル）とは「満たす」という意味の英語ですが、この場合「面塗り」という訳が合っているかと思います。

他の色に変えたいときには、「red」の部分を別の色名（英語）に変えればいいのです。例えば、「yellow」（黄色）としてみてください。

「fill="red"」という言葉を付けておかないと、黒く塗るようになる「fill="black"」が設定されたかのようにパソコン側が判断しますので、注意してください。

ワク線の色と幅を決める

初期設定では、図形の枠線は付けないことになっています。そこで、色や幅を付けていきます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" stroke="red" stroke-width="10"/>
</svg>

stroke（ストローク）は「一筆書き」の意味がありますが、ここでは「ワク線」という意味にとってもかまいません。面塗りの「fill」と同様に、色の名前を変えていきます。なお、ストロークの初期設定は「stroke="none"」（noneは「なし」ということ）ですので、ストロークを指定しておかないと、ワク線が付けられないことになります。

「stroke-width="10"」は、ワク線の幅が10であることを示しています。初期設定は「stroke-width="1"」です。

位置や大きさを変える

大きさを変えたいときには、幅を示す「width=""」と、高さを示す「height=""」の数値を変えるだけでいいです。

位置を変えたり、ずらしたりしたいときには、四角の左上角が「左からどれくらいにあるか」という「x=""」と、左上角が「上からどれくらいにあるか」という「y=""」の部分の数値を変えていきます。

基本的に、こういった数値は、小数点や負（-マイナス）の符号も取り扱えることができるので、精密な図を作りたいときのために覚えておくといいかもしれません。（例：x="0.503" y="-10")。もちろん、上で出てきたストロークなど、マイナスが使えないものもありますので、マイナスは使わない方がいいでしょう。

いろんな四角形を作る

さて、今度は、いろんな四角形をたくさん作ってみましょう。とは言っても、作るのに慣れていない方もいるでしょうから、例によって、以下の文章をコピーしてみてください。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" stroke="red" stroke-width="10" rx="10" ry="10"/>
<rect x="200" y="50" width="100" height="100" fill="none" stroke="yellow" stroke-width="10"/>
<rect x="50" y="200" width="100" height="100" stroke="red" stroke-width="40"/>
<rect x="200" y="200" width="100" height="100" fill="red" stroke="blue" stroke-width="40" rx="30" ry="30"/>
</svg>

上の文章を見てみると、<svg..>と</svg>の間に、四角を示す<rectで始まる文が挟まれています。こうして、複数の図形を作っていきます。注意点として、<>で機械は区別ができますので、改行は無視されます。

「rx=""」と「ry=""」という新しい言葉が出てきましたが、これは四角の角を丸めるときに使います。角の半径を指定します。今は覚えておく必要はありません。

属性について

もう理解した方もいるかもしれませんが、<>の間に、空白（改行でも可）で区切りながら、「x=""」というように、イコールで名前と値を結びつけています。この部分を「属性」と呼びます。

SVG言語では、属性を付け加えたり、値を変えていくことで、図の設定を変更していきます。こうすると、扱う情報量が小さくなり、素早く図を表示できるようになります。例えば、上のSVG画像はたったの473バイトで、このページよりも情報量が小さいのです。

次回では、遊びや実例をまじえながら、属性を説明していきましょう。

＞＞SVG学習辞典へ戻る

＞＞ホームへ戻る