なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

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でローディングアニメーションについて書きます。