最近、SVGアニメーションを自由に扱えるようになりたいなと思いまして、SVGを基礎から勉強していこうと思います。
今回は第一回目、基礎の基礎編です。SVGとはそもそも何なのかを軽く理解したあと、四角形や円、直線など簡単な図形を静的に描画し、それらのスタイル付けについて触れてみようと思います。
SVGとは
SVGとは"Scalable Vector Graphics"（スケーラブル・ベクター・グラフィックス）の略であり、W3Cによって開発された言語です。
現在勧告されている最新バージョンは「SVG1.1」（2011年9月に勧告）です。（公式仕様書：Scalable Vector Graphics (SVG) 1.1 (Second Edition)）
SVGとは何か、仕様書では以下のように述べられています。
SVG は二次元グラフィックスを XMLで記述するための言語である。 SVG は３種類のグラフィックスオブジェクト：ベクター形式のグラフィック（例えば直線と曲線からなるパス）, 画像, テキストを扱う。 オブジェクトはグループにまとめたり, スタイルを付けたり, 変換を加えたり, すでに描画されたオブジェクトに合成することができる。 SVG の特色機能には、変換の入れ子, クリッピングパス, アルファマスク, フィルタ効果, ひな型オブジェクトも含まれる。
（引用元：SVG1.1 日本語訳版 - 概要）
＊「W3C」とか「勧告」の意味が分からない方は、以下のメモを参考にしてみてください。
SVGに関する基本知識
SVGでのDOM構造について
SVGは、HTMLにおける「DOM」と同じような、「SVG DOM」という構造を持ちます。（「SVG DOM」は、「DOM Level 2」と互換性を保つように構築されているようです。）
そのため、JavaScriptで制御することもできます。
SVGのMIMEタイプ・拡張子・名前空間
- SVGのMIMEタイプ： 「image/svg+xml」
- SVG ファイルの拡張子： 「.svg」（gzip 圧縮された SVG ファイルの場合は「.svgz」）
- SVGの名前空間：「http://www.w3.org/2000/svg」
SVGの名前空間指定について
SVGはXMLを基盤とした言語なので、通常、以下のように名前空間の宣言が必要です。
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>しかし、HTML5のSVG要素として記述する場合は、この記述を省略することができるようです。
HTML構文は、文書内部でのMathMLやSVGの使用を許可します。mathやsvg開始タグは、HTMLパーサーに適切な名前空間で要素と属性を置く特殊な挿入モードへ切り替えさせ、大文字と小文字が混在する要素と属性の文字を修正し、そしてXMLのように空要素構文をサポートします。（中略）
名前空間宣言を省略してもよいです。
引用元：HTML5 Differences from HTML4（HTML4からのHTML5の差分）
つまり、HTML5の要素としてSVGを使用する場合、以下のようにしても良いということ。
<svg><circle cx="50" cy="50" r="50" fill="green"/></svg>SVGにおける様々な用語について
SVG1.1 - 用語定義の項で詳細に説明がされています。分からないワードがあれば確認してみてください。
*かなりの種類があるので、ここでは各用語についての説明は省略させて頂きます。
とりあえず簡単な図形を描画してみる
何はともあれ、とりあえず実際にコードを触ってみるのが一番理解しやすいということで、まずは簡単な図形の描画から試してみます。
SVGにおける基本図形の種類
よく利用されるグラフィック（四角形や円・線など）のために SVG であらかじめ定義された標準の図形のことを「基本図形」と呼びます。
基本図形にはそれぞれ専用のタグが用意されており、以下の6種類があります。
- rect（四角形）
- circle（正円）
- ellipse（楕円）
- line（直線）
- polyline（折れ線）
- polygon（多角形）
まずはこれら6種類の「基本図形」を描画することから始めてみます。
四角形の描画
四角形の描画には<rect>タグを用います。
CodePenでいくつか描画してみました。
See the Pen SVG01-四角形 by ddryo (@ddryo-the-encoder) on CodePen.
*viewBox属性はSVGの描画領域の大きさを指定しているものです。詳細は後日、別のメモで詳しくまとめようと思います。
専用属性
<rect>で使用できる属性について。
- x、y：図形の座標位置
- width、height：幅、高さ
- rx、ry：角丸の大きさ（片方しか指定されていない場合、もう片方も同じ値になる）
共通属性
<rect>だけでなく、基本図形タグ共通で使える属性です。
- fill：塗りの色
- stroke：線の色
- stroke-width：線の太さ
- paint-order：塗りと線の優先度
線（stroke）は内側と外側へ均等に描画されます。
また、塗りを「無し」にするときは、CodePenの中ではnoneを指定していますが、transparentやrgba(0,0,0,0)でも可です。
（fill:none; にしている場合、fillに関するイベントも無効となってしまう点に注意しましょう。）
正円・楕円
正円の描画には<circle>タグを、楕円の描画には<ellipse>タグを用います。
See the Pen SVG02-円 by ddryo (@ddryo-the-encoder) on CodePen.
専用属性
<circle>、<ellipse>で使用できる属性について。
- cx、cy：座標
- r：半径（ <circle>）
- rx、ry：横半径と縦半径（<ellipse>）
直線
直線の描画には<line>タグを用います。
See the Pen SVG03-直線 by ddryo (@ddryo-the-encoder) on CodePen.
専用属性
<line>で使用できる属性について。
- x1、y1：始点座標
- x2、y2：終点座標
折れ線・多角形
折れ線の描画には<polyline>タグを、多角形の描画には<polygon>タグを用います。
これらは非常に似ており、始点と終点を閉じるか閉じないかの違いだけしかありません。
See the Pen SVG04-折れ線・多角形 by ddryo (@ddryo-the-encoder) on CodePen.
専用属性
<polyline>と<polygon>で使用できる属性
- points：頂点の座標指定（x1,y2 x2,y2 ... xn,yn）
* 座標指定は「,」もしくは「半角スペース」で区切ることができます。（全部「,」でも全部「半角スペース」でも、両者が混ざっていても問題ありません。）
SVGのスタイル付けについて
ここまで、基本図形の描画を行ってきましたが、fillやstrokeなど、SVG 内容のグラフィックス要素がどのように描画されるかを定義するためのプロパティのことを「スタイル付けプロパティ」と呼びます。
また、このようなプロパティなどを用いてグラフィックスの様子を指定することを「スタイル付け」と言います。
スタイル付けの方法
スタイル付けをする方法は2つあります。
- SVG要素のタグに直接スタイル付けプロパティを付与する
- CSSを用いてスタイル付けプロパティを指定する
ここまで紹介してきたCodePenでのコードは、全て前者でスタイル付けを行ってきました。
CSSでスタイル付けを行ってみる
基本図形の内いくつかを、CSSでスタイル付けして描画してみました。
See the Pen SVG05-CSSによるスタイル付け by ddryo (@ddryo-the-encoder) on CodePen.
ポイント
- 座標以外のスタイル付けはCSSで行うことが可能です。
- CSSでのスタイル付けの方が、優先度は高くなっています。
上記CodePen内の正方形のコードを見てください。<rect>タグのfill属性にblueを指定していますが、実際の描画色はCSSで指定した #F44D61 であることが分かります。
SVGにおけるCSSの注意
CSS と SVG で共有されたプロパティのみをスタイル付けに利用できます。
そのため、SVGで使用できるCSSのプロパティは、HTMLで使用できるものとは異なることに注意しましょう。
詳細は「SVG1.1仕様書（第二版）日本語訳 - SVG のスタイル付けプロパティ」をご覧ください。
おわりに
今回はここまで。
SVGにおける基本図形を静的に描画し、スタイル付けの方法を２パターンで試してみました。
次回は、今回特に触れてこなかったsvgの描画領域について詳しく勉強していこうと思います。全てのグラフィックの描画に関わる非常に重要な知識になるので、是非ご確認ください。
