こんにちは、デザイナーのてっちゃんです。
日本酒を昼から飲み続ける会がめちゃ楽しかったけど翌日は二日酔いでした。

今回は、SVGについて勉強したことを書いていきます。
だいぶ前からある技術ですが、マルチデバイス対応やRetina Displayができてたことによって高解像度のディスプレイに対応する必要が出てきました。そんな中でSVGの需要が上がってきたわけです。

SVGってそもそもなに？

SVG（Scalable Vector Graphics）はベクターイメージのフォーマットで、PNGやJPEGやGIFなどのビットマップデータとは違い解像度に依存しないので拡縮しても問題ありません。W3Cによって開発され、オープン標準として勧告されています。

こんな利点があります

• SVG はHTMLやCSSのような形式で作成することができ、ピクセルのデータを保存する必要がないので保存するデータを非常に少なくすることができます。
• ベクター画像形式なので拡縮しても劣化せず表示できるので高解像度ディスプレイに向いています。
• SVGのソースはテキスト・ベースのファイルです。そのため利用しやすく、また検索エンジンに対応させることもできます。

このような利点からSVGは役立ちます。
Illustratorからの書き出しも簡単にできて、HTMLにもimgタグで記述して表示します。
この辺は応用になっていくので、今回は基礎のSVGファイルそのものを作りを説明していきます。

SVGの記述方法

SVGはXML形式で書いていきます。今回はHTML5の中にインラインで書いていこうと思います。
まずはSVGを表示するタグになります。

SVGにもHTMLのようなDOCTYPE宣言が存在しています。

あとは、この<svg>と</svg>の間にさまざな図形の設定を書いていきます。

要素

基本的な図形を表示するタグになります。

要素名	説明
line	線の作成
polyline	複数の線分の定義で構成された形状
rect	四角形の作成
circle	円の作成
ellipse	楕円の作成
path	任意のパスの作成

属性

要素をコントロールするため属性を示していきます。

属性名	説明
cx	円の中心の横方向（X）の位置。cxはcenter x座標の意味
cy	円の中心の縦方向（Y）の位置。cyはcenter y座標の意味
r	円の半径の長さ。rはradiusの意味
fill	塗り色
stroke	枠色
stroke-width	枠幅

この要素と属性を使うと以下の図形が出来ます。

線

See the Pen FEBnt by tetsu (@oremega) on CodePen.

複数の線

See the Pen sGcaj by tetsu (@oremega) on CodePen.

四角形

See the Pen FHkmh by tetsu (@oremega) on CodePen.

円形

See the Pen DxpHB by tetsu (@oremega) on CodePen.

楕円

See the Pen yDJLb by tetsu (@oremega) on CodePen.

パス

ここに示しているコマンドは大文字または小文字で使用することができます。コマンドが大文字の場合には絶対位置が適用されます。コマンドが小文字の場合には相対位置が適用されます。

コマンド	説明
M	指定位置まで移動します
L	指定位置まで線を描画します
H	指定位置まで水平線を描画します
V	指定位置まで垂直線を描画します色
C	指定位置まで曲線を描画します
S	指定位置まで滑らかな曲線を描画します
Q	指定位置まで2次ベジェ曲線を描画します
T	指定位置まで滑らかな2次ベジェ曲線を描画します
A	指定位置まで楕円の弧を描画します
Z	指定位置でパスを閉じます

See the Pen lxbhv by tetsu (@oremega) on CodePen.

コマンドはd属性で定義されています。
まずは「指定位置まで移動」コマンド (M150 0) で定義されているように、x:150、y:0 で描画が始まっています。そして「指定位置まで線を描画」コマンド (L75 200) を使用して x:75、y:200 まで線を描画しています。次に、別の「指定位置まで線を描画」コマンド (L225 200) を使用して別の線を描画しています。最後に、「指定位置で閉じる」コマンド (Z) を使用して図形を閉じています。Z コマンドには座標が指定されていません。これはパスを閉じるという動作の定義上、現在の位置から描画の開始点 (この場合は x:150 y:0) に戻る線を描画することになります。

終わりに

今回は基本的なSVGを説明していきましたが、ここまではcssでも表現できるレベルです。
しかしSVGが役立つのはもっと複雑なイラストやロゴその他のベクターデータ、そしてHTML,CSSと組み合わせた複雑な表現を可能にしている部分です。
「２」が出来るようにまた勉強します。