SVGについて

スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。

Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。

信号機を描くコードをサンプルとして載せました。
ぞれぞれ解説します。

SVGは要素なので、CSSで背景の色を指定できます。今回はわかりやすいようにグレーにしました。

xmlns属性とxmlns:xlink属性は必ず書きましょう。今後バージョンが上がる可能性もあるのでバージョンも書いておいた方が無難です。このSVG要素の中に信号機の丸や矩形（四角形）を書いていきます。

defs要素は画面上には出ませんが、中にある図形を定義しています。symbol要素で囲んである部分がひとつの図形です。

circleは文字通り丸を書いています。cxが原点（左上）からのX軸の距離、cyが原点からのY軸の距離です。rは半径です。信号機を描く場合、丸は使いまわす方が楽なのでシンボル要素で囲んでいます。

rectは矩形（四角形）です。信号機は正確には角丸の四角形なのでrxとry横と縦の半径を指定しています。

symbolを使いまわすにはuse要素を使います。symbol要素に付けたID名を付けることで使いまわすことができ、ここでfill（塗りの色）やstroke（線の色）、stroke-width（線の太さ）を書くことでいろんな丸を描けます。色は真ん中が黄色、左が青、右が赤です。use要素のxとyは原点からではなく元のsymbolのcxとcyからの位置ですので気を付けましょう。

次はSVGでローディングアニメーションについて書きます。