どうも7noteです。イラレやフォトショップで作成したアイコン画像をwebで使えるSVG画像として利用する方法。

①画像の作成

アイコンなど色をCSSで変更する場合は予め黒でアイコンを作成してください。

『イラレ』の場合

SVG画像として利用したい画像のファイルを開いた状態で

「ファイル」⇒「別名で保存」⇒「ファイルの種類」をSVGにして「保存」

『フォトショップ』の場合

「ファイル」⇒「書き出し」⇒「書き出し形式」⇒「ファイルの設定」をSVGにして「書き出し」

※シェイプが重なっているところが白くなる場合は以下の処理をしてからSVG書き出しをしてください。
「長方形ツール」を選択⇒上部メニューの中から「シェイプコンポーネントを結合」

②svg画像をsvgタグに変換

上記のサイトがおすすめです。
このサイトで作成したsvg画像をsvgタグに変換していきます。

1. 作成したsvg画像をドラッグ＆ドロップ
2. Untitled Set とかかれた場所にsvg画像が登録されます（複数登録可）。処理したいものをクリックで選択（複数選択可）。
3. 下部の左の「Generate SVG & More」を選択。
4. さきほど選択したアイコンが表示されていると思うので、カーソルを合わせて「Get Code」の文字がでてきたらクリック。
5. svgタグ、symbolタグ、cssが生成されます。これらを使います。

③svgタグを使う

htmlの任意の場所にsymbolを記述。以下のsvgとdefsタグで囲ってください。
例ではbodyタグの直後に記載しています。

そして、アイコンを表示させたい場所にsvgタグの方を記述します。

index.html

<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>

<symbol id="icon-home" viewBox="0 0 32 32">
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>

  </defs>
</svg>

<p><svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg>ホーム</p>

</body>

cssで大きさや色を指定すれば完了です。

style.css

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: #f00;
  fill: #f00;
}

まとめ

svg画像は複数ページで仕様したり、条件によってCSSで色を変えたいなどの場合でも1ファイルで完結できるので、作成・管理が楽に済みます。
ベクターデータ（拡大してもぼやけない）なので、綺麗にも見えるためメリットが大きいのが特徴ですね。

ただ使用方法が慣れるまではちょっと難しいので、手順をまとめているサイトを見ながら最初は使ってみることをおすすめします。

今回紹介した方法以外でもsvg画像を表示する方法はあるので、調べて様々な方法を試してみてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ