どうも、kuroro0319です。
最近というか2〜3年前からSVGが結構使えるようになってきたので、使っていたのですが、
使い方がイマイチ微妙で、毎回いちいち調べているのも面倒だったので、ここにメモがてら書いていきます。

そもそもSVGってなんぞや？

『Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。』

Wikipediaには上記のように書かれています。
要するにAdobeのIllustratorのパスをWebサイトにも画像形式で掲載できるようにした画像フォーマットという感じです。
JPGやGIF、PNGなどの通常画像形式と違い、パスデータを持っているため、拡縮による劣化が起こりにくく、容量も抑えめになります。

ただし、複雑なオブジェクトや色を大量に使用するものなどは不向きなので、アイコンやロゴ、パターンなどの単純な図形に使用するのがいいと思います。

まずはSVG画像を書き出してみよう！

SVG画像の書き出しは非常に簡単です。
AdobeのPhotoshopかIllustratorを使うのがいいと思います。
ただ、ソフトを持っていない人もいるかもしれないので、オンラインツールなどの使用も検討してみてください。
どれがいい？ 全部無料でブラウザーだけで使えるSVG編集ツール6選
フェレットさんで紹介記事がありますね。

PhotoshopでのSVGの書き出し方

それでは、Photoshopでの書き出しです。
書き出したい画像をレイヤー上で選択して、右クリック後に「書き出し形式」を選択します。

その後、「書き出し形式」の画面が出てくるので、「ファイル形式」を「SVG」にして「全てを書き出し」ボタンを押したら任意の場所に書き出されます。

IllustratorでのSVGの書き出し方

次に、Illustratorでの書き出しです。
「アセットの書き出し」パネルに書き出したい画像をドラッグドロップして、「書き出し形式」を「SVG」にして、「書き出し」ボタンを押すとPhotoshop同様に任意の場所に書き出されます。

細かい調整は必要になりますが、これでひとまず、SVGの書き出しは完成です。
次は早速、書き出した画像を埋め込んでみましょう。

SVGをサイトに埋め込んでみよう！

SVGのサイトへの埋め込み方法はだいたい3種類あります。

① 他の画像と同じくimgタグで埋め込み
② SVGのコードをそのまま埋め込み
③ objectタグで埋め込み

だいたいは面倒なので、imgタグで突っ込んじゃってます。

① 他の画像と同じくimgタグで埋め込み

これはそのまんまです。

<img src="/img/180731/svg_sample1.svg" alt="">

画像がかなり適当ですが、以下のように表示されます。
画像の大きさなども変えたい放題です。

② SVGのコードをそのまま埋め込み

これはちょっと面倒ですが、色を変更したい時などに使うと便利です。
imgタグのままだと色が変更できないので、アニメーションなどに使う時に少し不具合があります。
SVGファイルをテキストエディタで開いて、svgタグとrectやpathなどのタグだけを埋め込んでみましょう。

<svg id="svg_sample2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 701 380">
<rect class="svg_sample2" width="701" height="380" />
</svg>

ちょっと長いですが、これでcssから色なども変更できるようになりました。
マウスオーバーで色も変更できます

③ objectタグで埋め込み

Flashの埋め込みがなくなって以来、あんまり使うことのなかったobjectタグですが、svgの埋め込みにも使えます。
直接svgファイルを操作して、アニメーションをした場合などの時はobjectタグを使った方がいいかもしれません。
svgファイルの中で別のsvgファイルを呼び出す場合などに使うのがいいようです。

<object type="image/svg+xml" data="/img/180731/svg_sample２.svg"></object>

アイコンフォント化するという手もある

アイコンなどが大量にあり、かつ色々な場面で使い回しをしたい時はアイコンフォント化してしまうという手もあります。
icoMoonというサイトで簡単に作れます。
フォント化してしまうので、色は単色で全部サイズを揃える必要はあります。
多少手間はかかりますが、一度フォント化してしまえばサイトで使い回しでき、色なども他のフォント同様colorプロパティで変更できるので、とても使いやすいです。

SVGを使ってみての感想

だんだんとRetinaディスプレイ以上の高解像度モニターが出てきていたり、
様々な画面サイズに対応することを求められてきているので、非常に重宝しています。
拡大してもあまり劣化しないというのは画像を作る枚数が減るので、とても素晴らしいです。
特にアイコンなどはSVGで作成しないと非常に面倒なので、SVGのない生活にはあまり戻りたくないですね。
アニメーションへの親和性も高いのもすごくいいです。

それから、今後はデザインもSVGを前提にして作っていく必要が出てきていると感じています。
できるだけシェイプで作ったり、書き出しをしやすいような作りにする必要があると感じています。
IllustratorやSketchがもっと主流になるかもしれません。
あと、最近はPhotoshopなどで簡単に書き出せるようになったので、ハードルが低くなってきたのも非常に嬉しいですね。
慣れた頃に新しいフォーマット出てきそうだけど…