SVG コーディングの基礎知識 その２

SVG コーディングの基礎知識の第２弾です。
今回は、SVG の基本的な書き方とcircle要素について軽く触れていきます。

SVG の基本的な書き方

SVG は画像の仲間ですが、その中身は XML で記述されているテキストデータです。
中身が XML であるということは、HTML と同じくタグで書くことができます。

たとえば、SVG で円を描くには、次のようなコードを書きます。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <circle cx="150" cy="150" r="100" fill="#E53A73"></circle>
</svg>

ネームスペース

SVG タグには、ネームスペースという仕組みがあります。
このネームスペースは、HTML などの他の要素と SVG の要素を混同させないための仕組みです。

SVG タグのxmlns属性にhttp://www.w3.org/2000/svgを設定すると、SVG タグの中に書く要素がすべて SVG の要素として扱われるようになります。
※ xmlns 属性は省略可能：属性を省略した場合、xmlns="http://www.w3.org/2000/svg"を設定したものと同じになります。

viewport

SVG タグにwidthとheightが設定されていますが、これは viewport（窓）となるサイズを決めています。

viewBox

viewport の値と一緒に、viewBox属性が設定されていますが、これは「窓の中の座標」を決めている値になります。
例の viewBox は、viewBox="0 0 300 300"となっているので、viewport の座標は以下のようになっています。
※ y 座標の値は、グラフの座標と違って下に行くほど値が大きくなるので注意が必要

(x: 0, y: 0) (x: 300, y: 0) (x: 0, y: 300) (x: 300, y: 300)

このとき、viewport のサイズと viewBox の座標を一致させると、座標 1 を 1px として扱うことができます。

circle 要素

SVG タグの中には、円を描くためのcircle要素が書かれています。

<circle cx="150" cy="150" r="100" fill="#E53A73"></circle>

circle要素の属性はそれぞれ、以下の意味を持ちます。

• cx => 円の中心の x 座標
• cy => 円の中心の y 座標
• r => 円の半径の長さ
• fill => 円の塗り色

SVG の値は、すべて座標を表しています。
したがって、属性の値に単位をつけることができません。

まとめ

SVG には、今回紹介したcircle要素以外にもたくさんの要素が存在します。
その他の要素には、今後の記事で紹介していきたいと思います。

もっと要素が知りたいという方は、以下のサイトをのぞいてみてください。 SVG 要素リファレンス - SVG: Scalable Vector Graphics | MDN

それでは、今回はここまで : )