記事内でアイコンや簡単な図を挿入したい時、画像ファイルでは数十KByteは必要になります。
こうした画像をSVGで実装すれば容量を数KByteに抑えられ、表示の高速化も期待できます。
ここでは、SVG画像の基本的な作成・使用方法を説明します。

SVGとは

概要

「Scalable Vector Graphics」を略してSVGと呼びます。
直訳すると「拡大縮小可能なベクター画像」となり、線や円のような単純な図形で構成される画像を表現できます。
利点は、ベクター画像なのでレスポンシブ対応によって拡大縮小されても画質が劣化しない事、テキストベースなのでデータサイズが比較的小さくできる事、現行の全てのブラウザで表示できる事が挙げられます。
欠点は、 ベクター画像なので複雑な画像には向かない事ぐらいです。

SVGのデータ構成

データ構成

HTML（XML）形式で構成されたデータで、<svg>で囲まれた、下記のような記述で作られます。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
    <g>
        <rect x="10" y="5" width="20" height="30" />
    </g>
</svg>

要素

図形

線

文字

グループ

<g id="gr01" stroke="orange" fill="none">
    <path d="..." />
    <path d="..." />
</g>

要素をグループ化して扱えます。
グループを複数作り、上記のようにidで区別して使うことが多いです。
グループに対して下記のスタイルを記述すると、グループ内の要素に一括して適用できます。

図形の再利用

グループ<g>タグや<defs>タグ等に付けられたIDに対して、<use>タグを使うと、同じ図形を再利用することができます。

下記の例では別ファイルにある図形（IDがLED_R）を参照しています。

<use x="13" y="10" href="./eComponents.svg#LED_R" />

この時、参照される側のsvgファイルには以下のように記述してあります。

<g id="LED">
	<path d="M0.3,0.25 v-0.5 M0.65,0 h-0.1l-0.2,-0.2h0.35v0.45z" style="stroke:#d0d0d0; stroke-width:0.05; stroke-opacity:0.5; fill:#d0d0d0; fill-opacity:0.5;"/>
	<circle cx="0.5" cy="0" r="0.6" style="stroke:#ffffff; stroke-width:0.3; stroke-opacity:0.2; fill:#ffffff; fill-opacity:0.3;"/>
</g>
<g id="LED_R">
	<circle cx="0.5" cy="0" r="0.6" fill="#ff0000"/>
	<use x="0" y="0" href="#LED"/>
</g>

再利用する図形を定義するために<g>、<defs>、<symbol>がよく使われます。
それぞれ違いがあるので、目的に応じて使い分けると良いでしょう。

<g id="CC_h" transform="rotate(90)"><use x="0" y="0" href="#CC_v" /></g>

要素のスタイル

描画する線の太さや色などを指定できます。SVGの中に直接書く他、CSSに書くことができます。
よく使うものを下記に挙げます。

線のスタイル

• 線の色
  CSSでの色の指定方法と同様に、stroke=”red” や “#FF0000″、”rgba(255,0,0,1)” と書きます。
  線無しにするには “none” を指定します。
• 線の太さ
  stroke-width=”3″ のように数値で指定します。
  ゼロやマイナス値にすると線が描画されません。
• 線の終端
  stroke-linecap=”round”とすると、先端が丸められます。他には”butt”(先端が無い)と”square”(線の太さの半分飛び出す)が指定できます。
• 線の曲がり、輪郭の形状
  stroke-linejoin=”round”とすると、直角線を描いた時に角が丸められます。他には”bevel”(面取り)と”miter”(尖がりから面取りが可変)が指定できます。

塗りつぶしのスタイル

• 塗りつぶしの色
  strokeと同様に、fill=”blue” や “#0000FF”、”rgba(0,0,255,1)” と書きます。
  “none” で塗りつぶし無し、”transparent” で透明になります。

• グラデーション
  グラデーションを使うには、defsタグでグラデーションの定義をしておきます。
  線形グラデーションは linearGradient、円形グラデーションは radialGradientタグを使います。
  定義したグラデーションにはidを忘れずに付けておきましょう。
  グラデーションの方向はx1,y1、x2,y2の座標で表される直線によって制御できます。0～1、または0～100％の範囲で指定します。
  stopタグのoffsetで色の適用範囲を設定し、stop-colorで色を指定します。
  fillでグラデーションのidを参照すれば、その色で塗られます。

<defs>
  <linearGradient id="gra_sample" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%"   stop-color="#11ccff"></stop>
    <stop offset="50%"  stop-color="#ffdddd"></stop>
    <stop offset="100%" stop-color="#ffff11"></stop>
  </linearGradient>
</defs>
<circle cx="15" cy="15" r="10" style="stroke:#none; fill:url(#gra_sample)" />

パスでの線の描画

svgで多用するパス（軌跡）について、概要を説明します。

<path d="M 9,8 35,32 C 35,32 35,19 52,18 68,17 53,45 53,45 L 82,34 90,5 Z" />

d=””の中で、下記のコマンドを使ってパスを描きます。
各コマンドは大文字で書くと絶対座標で、小文字で書くと相対座標での指定になります。

点の移動

直線

パスを閉じる

曲線

2次ベジエ曲線（Q, q, T, t）や、3次ベジエ曲線（C, c, S, s）や、円弧（A, a）があります。
指定する引数が複雑なので、図と併せて説明します。

2次ベジエ曲線

2次ベジエ曲線は、始点・制御点1・終点を使って曲線を描きます。

<path d="M 5,25  Q 15,10 25,25" />
<path d="M 45,25 Q 60,2  65,25" />

Mコマンドで開始点5，25が指定されています。
続くQコマンドで、制御点15，10が指定されます。
Qコマンドの2つ目の座標25，25は終点を表します。
点と制御点を結ぶ直線に引っ張られるようにして、曲線が描かれます。
制御点が点に近いと緩いカーブになり、点から離れていると、急カーブになります。

3次ベジエ曲線

3次ベジエ曲線は、始点・制御点1・制御点2・終点を使って曲線を描きます。

<path d="M 9,5 C 5,19 41,44 95,27" />

Mコマンドで開始点9，5が指定されています。
続くCコマンドで、開始点側の制御点5，19が指定されます。
開始点と制御点を結ぶ直線に引っ張られるようにして、曲線が描かれます。この直線が短いと、急カーブを描くようになります。
Cコマンドの2つ目の座標41，44は、終点側の制御点を表します。
Cコマンドの3つ目の座標95，27が終点になります。
上記の例では、終点側の制御点と終点を結ぶ直線が長いので、曲線は緩いカーブを描いています。

円弧

ベジエ曲線でも円弧は描けますが、Aコマンドのほうが正確な円弧を描けます。
また、始点と終点で描ける事もメリットです。

<g style="fill:none;stroke:#000000;stroke-width:0.5px">
	<path d="M5,5  A5,3 0   0 1 15,0" />
	<path d="M30,5 A5,3 30  0 1 40,5" />
	<path d="M60,5 A5,3 -30 0 1 70,5" />
</g>
<g style="fill:none; stroke:#999999; stroke-width:0.4px; stroke-dasharray:0.6">
	<path d="M5,5  A5,3 0   1 0 15,0" />
	<path d="M30,5 A5,3 30  1 0 40,5" />
	<path d="M60,5 A5,3 -30 1 0 70,5" />
</g>

上記の例では、
それぞれの楕円の x方向の半径は5、y方向の半径は3にしています。
左の図形は 回転角0度、中央の図形は 回転角30度、右の図形は 回転角-30度にしています。
黒い実線が 短い方の円弧(0)で、時計回り(1)を指定してあります。
灰色の点線は 長い方の円弧(1)で、反時計回り(0)を指定しています。
円弧の始点・終点の座標は同じです。

他のコマンドについては、随時追加していきます。

画像編集ソフトでSVGを作る

1. 画像編集ソフトを用意する
   フリーソフト「Inkscape」を使います。公式ページからダウンロードできます。
   Inkscape公式ページ

2. 画像データの作成
   Inkscape上で新規に画像を作成するか、下記の手順でビットマップ画像をベクター画像に変換します。
   1. 「ファイル」-「開く」 で変換したい画像を開きます。
   2. 画像をクリックして選択した状態で「パス」-「ビットマップをトレース」をクリック。
   3. 設定はお好みで変更して「適用」をクリック。

3. SVGの保存
   「ファイル」-「名前を付けて保存」 で、種類を「プレーンSVG」にして保存します。

HTML内でSVGを表示する

タグを挿入する

HTML内でSVGを表示するには、<body>タグ内に<svg>タグを入れます。

viewBoxとwidth,heightの関係

出力したSVGファイルには、width、height、viewBox の大きさが書かれています。

<svg width="300" height="200" viewBox="0 0 300 200" ....

width、height はSVGの描画領域の幅、高さになります。
viewBoxはSVGの表示領域になります。

レスポンシブ対応する

レスポンシブ対応させるには、svgタグから width=”…” と height=”…” を削除します（viewBox=”…” は残す）。

<svg viewBox="0 0 300 200" ....

CSSで背景にSVGデータを埋め込む

CSSにSVGファイルを直接記述しても表示はできますが、SVGデータを埋め込む事もできます。
この方法はSVGで作ったアイコンや背景の表示に適しています。

SVGを整形する

改行やインデント、コメントや余分な空白を消して、1行につなげた状態にします。
さらに、画像サイズを明確にするため、widthとheightを指定します。

整形前の例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
	<path style="fill:#784421" d="M 31,31 C 18,20 2,30 4,44 14,53 33,48 31,31 Z" />
	<path style="fill:none;stroke:#541717" d="M 29,31 C 15,28 10,37 8,40" />
	<path style="fill:#00dd00" d="M 29,33 C 32,23 31,12 31,12 V 12 C 28,10 26,9 26,2 29,4 33,7 32,12 L 32,17 C 34,13 35,12 43,12 38,16 36,15 32,18 32,23 32,29 31,32 31,33 30,33 29,33 Z" />
</svg>

整形後の例：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path style="fill:#784421" d="M31,31C18,20 2,30 4,44 14,53 33,48 31,31Z"/><path style="fill:none;stroke:#541717" d="M29,31C15,28 10,37 8,40"/><path style="fill:#00dd00" d="M29,33C32,23 31,12 31,12V12C28,10 26,9 26,2 29,4 33,7 32,12 L32,17C34,13 35,12 43,12 38,16 36,15 32,18 32,23 32,29 31,32 31,33 30,33 29,33Z"/></svg>

base64にエンコードする

base64の方が、パーセントエンコードに比べて変換後の文字列が短くなります。
下記に、簡単に変換できるツールを用意しましたので、ご活用下さい。
整形したSVGをコピーして、入力ボックスに貼り付け、「Encode」ボタンをクリックして下さい。
「Copy」ボタンで変換結果をコピーできます。

CSSに記述する

エンコードしたSVGデータをコピーし、CSSに貼り付けます。

アイコン表示例：

.my-icon {
	background: url(data:image/svg+xml;base64,この部分にbase64エンコード結果を貼り付け) no-repeat;
}

SVGのアニメーション（次回）

長くなるので後日、別記事にまとめます。