カラーミーでSVGアイコンを利用する

先日の「カラーミーでアイコンフォントを利用する」の続きです。とは言えカラーミーに限定される話でもありません。

FontAwesomeやicomoonなどに代表されるアイコンフォントと、SVGアイコンのどちらが優れているか、はまだまだ議論されているところですし、「そんなもんケースバイケースだろ」という感想しか抱いていないのですが、世の中のウェブデザインがSVGアイコンにかなり傾倒しているのは事実です。

参考がてら、カラーミーショップ [PR]で販売されている有料テンプレートで一番高額な「MONO」を見てみましたら、こちらもSVGアイコンを利用していました。ちなみに明日(2019.10.31)まで有料テンプレート半額セールです。普段なら3万円のところ、1万5千円。

そういうわけで、今回は「カラーミー有料テンプレートで実装されているSVGアイコンの使い方」についてです。

途中の理屈は抜きにして簡潔に方法だけ書きます。詳しい理屈や理論が知りたい方は「SVG 1.1 仕様（第２版）日本語訳」をご覧ください

svgアイコンのデータ作成

サンプルのsvgデータ作成についてはicomoonを使うことにします。

icomoonで好きなアイコンを選択しダウンロード。無料アイコンの種類が少ないと嘆く貴方は「FontAwesomeの必要なアイコンだけを利用」をご参照ください。

icomoonで好きなアイコンをsvgでダウンロード。

ダウンロードした圧縮ファイルの中に「SVG」というフォルダがあり、その中に各アイコンのsvgデータファイルが入っています。

ファイルをテキストエディタなどでひらくと下のようになっているのではと。

<!– Generated by IcoMoon.io –>
<svg version=”1.1″ xmlns=”https://www.w3.org/2000/svg” width=”32″ height=”32″ viewBox=”0 0 32 32″>
<title>cart</title>
<path d=”M12 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z”></path>
<path d=”M32 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z”></path>
<path d=”M32 16v-12h-24c0-1.105-0.895-2-2-2h-6v2h4l1.502 12.877c-0.915 0.733-1.502 1.859-1.502 3.123 0 2.209 1.791 4 4 4h24v-2h-24c-1.105 0-2-0.895-2-2 0-0.007 0-0.014 0-0.020l26-3.98z”></path>
</svg>

これを少し改変します。

<!– 改変コード -->
<svg version=”1.1″ xmlns=”https://www.w3.org/2000/svg” style="display: none">

<symbol id="your_favorite_id" viewBox=”0 0 32 32″>
<path d=”M12 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z”></path>
<path d=”M32 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z”></path>
<path d=”M32 16v-12h-24c0-1.105-0.895-2-2-2h-6v2h4l1.502 12.877c-0.915 0.733-1.502 1.859-1.502 3.123 0 2.209 1.791 4 4 4h24v-2h-24c-1.105 0-2-0.895-2-2 0-0.007 0-0.014 0-0.020l26-3.98z”></path>
</symbol>

</svg>

＊変更した点

svg要素からwidth, height, viewBox を削除。
svg要素にdisplay:none を追加
データ本体部分をsymbol要素で囲んで、一意のIDをつける（必須）
svg要素に指定されていたviewBox属性をsymbol要素につける

svg要素の中に複数のsymbol要素を追加できますので、

<svg hidden>
  <symbol id="icon-1"> ... </symbol>
  <symbol id="icon-2"> ... </symbol>
  ...
</svg>

のように必要なだけ追加できます。

カラーミーの有料テンプレートではこのデータをインラインでhtml末尾においてます。
データを外部においておくとブラウザキャッシュが効くのですが、IE9〜11が外部svgデータ読み込みに対応してないのでそのようにしているのだろうと推測します。~~IEなんてこの世から無くなってしまえばいいのに。~~
データ量がそこまで多くなければインラインでも大した問題ではないでしょう。

SVGアイコンを設置する

アイコンを表示させたい箇所に以下のように記述

<svg role="img"><use href="#your_favorite_id"></use></svg>

<use>要素を使ってid指定で呼び出す形です。ですのでsymbol要素のID忘れ、ID重複に気をつけましょう。

実際にカラーミーで編集してみます。

ちゃんと表示されました　↓↓

SVGアイコンのサイズや色についてはcssで編集できます。お馴染みのwidth, height, color　などが使えますので簡単です。