今までSVGを使ったことがなかったので、お勉強がてらまとめてみました。
SVGについて順序立てて説明していくので、不要な方は飛ばしてください…！
SVGとはなんぞや？
画像を扱う形式としてよく知られる、JPEGやPNGとの違いはなんでしょう？
それは、ビットマップ画像かベクター画像かの違いです。
（※便宜上、ここではドットとピクセルは同義のものとして扱わせていただきます。）
ビットマップ画像について
ビットマップ画像が、JPEGやPNGに値します。
ピクセルを用いた画像形式で、ピクセルの色などを配列情報として扱います。
1ピクセルずつ色情報を持たせることができ複雑な表現が可能なため、写真などのデータはこの形式で扱われます。
よって、ご想像のとおり、ビットマップ画像は拡大するとこうなります。
ラスター画像
ビットマップ画像はラスター画像とも呼ばれますが、狭義の意味では違いがあり
ビットマップがピクセルの集合体を画像として表現するのに対し
ラスターはピクセルが横線状に並んだもの（ラスター線）を平行に並べた面を画像として表現します。
あくまでピクセルの集まりという意味合いで、ビットマップとラスターは同義の言葉として扱われています。
ビットマップ：呼称の由来
元々は、モノクロ2値（白黒など）の画像情報を格納した初期のフレームバッファとその内容である画像情報をビットマップと呼んだ。モノクロ2値の画像はピクセルあたり1ビットの情報量で記録されており、ディスプレイのピクセル配置とメモリのビット配置が1対1で対応（マッピング）することから「ビットマップ」と呼んだのである。
（引用元：Wikipedia）
ピクセルを集合として扱う画像をざっくりと「ビットマップ」と広くいっていますが
狭義の技術用語としては「ピクセルマップ」「ピクスマップ（pixmap）」と呼ぶこともあるそうです。
ベクター画像について
ベクター画像が、SVGに値します。
ビットマップ画像がピクセル単位で情報をもつのに対し
ベクター画像は点の座標や線、面や色などの図形を表す数値情報の集合で、図形同士の関係は数学的方程式として表されるため
拡大・拡小での劣化はありません。
単純な図形で構成されている場合は、ビットマップ画像よりもデータサイズは小さくなります。
以下の画像は、SVGをズームしたものです。
また、vectorという表記ゆえに、ベクトル画像などとも呼ばれます。
SVGを埋め込んでみる
さっそくSVGを埋め込んでみます。
動きをつけない場合
単純にアニメーションをつけずにJPEGやPNGの代わりとして使う場合は、imgタグを使うのが一番簡単です。
もしくは、CSSのbackground-imageプロパティで指定することもできます。
<p>imgタグを使う場合</p>
<img src="./01.svg" alt="">
<head>
<style>
.svg {
background: url(./01.svg) no-repeat 0 /100%;
margin: 0 auto;
width: 140px;
height: 55px;
}
</style>
</head>
<body>
<p>backgroundプロパティを使う場合</p>
<div class="svg"></div>
</body>
動きをつける場合
次に、SVGアニメーションをつけたい場合です。（この記事のメインになります！）
CSSアニメーションを使う方法と、JavaScriptを使う方法があります。
まず共通するのは、SVGをエディタで開いてコードをまるっとコピペすることです。
これは後ほどアニメーションさせるときにコードを載せるのでそちらをご覧ください。
① CSSアニメーションを使用する。
まず、お手軽にできるのがCSSアニメーションを使った方法です。
SVGのプロパティは色々あるので、検索してみてください！
コードやアニメーションなどの内容は、以下のコードペンをご覧ください。
https://codepen.io/chelcat3/pen/JjoRgJj
CSSアニメーションを使う方法はかなりお手軽でよいのですが、残念ながら現状IEには対応しておりません。
② JavaScriptでアニメーションさせる。
次はJavaScriptでアニメーションさせる方法です。
JavaScriptでイチから書こうと思うとかなり大変なので、ライブラリを使うことをおすすめします。
今回はvivus.jsを使ってみます。
こちらも、コードやアニメーションなどの内容は、以下のコードペンをご覧ください。
https://codepen.io/chelcat3/pen/eYmBOxB
調べてみると、IE11は対応していると多く見かけましたが、自分の環境だとfill-opacityが上手くアニメーションされていませんでした。
まとめ
まだまだ勉強途中なので、これからもがんばります。