takayama

2018.06.19

IcoMoonでSVGスプライトを作って設定してみた

IcoMoonでSVGスプライトを簡単に設定できるようでしたのでやってみました。

ABOUT

SVGスプライトとは

サイト全体で使用する複数のSVG要素を一つのデータにまとめて、使いたい時に呼び出すというものです。
仕組みは<svg>タグを<defs>タグで囲み外部ファイルにまとめて、<use>タグで呼び出します。

SVGスプライトを使うメリット

SVGなので滲まずキレイに表示され、色の変更やサイズ変更がCSSで可能です。
同様にSVGを使うアイコンフォントとは違い、対応するブラウザ環境が広いので文字化けする心配はありません。
また、アイコンフォントは本来テキストを表現するための仕組みをハックして視覚的なシンボルを表現するものです。
それに比べてSVGスプライトはHTMLの標準的な仕様になります。

なぜIcoMoonで作ったか

gulpでも作れますが、IcoMoonでも手軽に作ることができるようでしたので、今回はIcoMoonでSVGスプライトを作って設定してみました。
ただし、IcoMoonで作ったものはキャッシュを削除すると消えてしまうので、作成するSVGの量が少ない場合に使用するのを推奨します。

HOW TO

Illustratorでアイコンを作成する

SVGで表示するアイコンをIllustratorで作成します。

上記のように、アートボードで分けて作成しました。
Illustrator CS4以降の方はアートボードの方が便利なのでおすすめです。
「ウィンドウ」→「アートボード」で、アートボードパネルを表示。各アイコンに英数字で名前をつけてください。その名前がSVGのファイル名として書き出されます。

【1】「ファイル」→「書き出し」→「書き出し形式」で①ファイル形式「SVG」を選択。
②アートボードごとに作成にチェックを入れます。
これで、アートボードごとにsvg形式で書き出されます。

【2】「③書き出し」をクリックしたら出てくる「SVGオプション」の「小数点以下の桁数」は、ベクトルの精度を1〜7まで指定できます。
値が大きいほどファイルサイズが大きくなり、画質が向上します。最適の数字は「3」です。

【3】ただし、ここで「ファイル名_」がついてきてしまいます。後々IcoMoonで自動的にファイル名に「icon-」が付与されるので、「ファイル名_」は削除しておきます。

IcoMoonでSVGスプライトに必要なファイルを生成する

【1】 IcoMoonにアクセスして右上のIcoMoon Appのボタンをクリックします。

【2】左上の「Import Icons」をクリックして、Illustratorで作成したSVGアイコンをインポートします。

【3】 SVGアイコンにするものを選択して左下の「Generate SVG & More」というボタンをクリックします。

【4】以下のような画面が出たら左下にある「SVG,PNG Download」のボタンをクリックしてzipファイルをダウンロードします。

ちなみに、このページでもファイル名をクリックすればid名を変更することが可能です。

SVGスプライトの設定の仕方

ダウンロードしたzipファイルを解凍すると、以下のファイルがあります。
・svgxuse.js
・symbol-defs.svg
上記2つのファイルをプロジェクトのフォルダ内に入れます。
今回は、svgxuse.jsを「/js/」、symbol-defs.svgを「/svg/」に格納しました。
※svgxuse.jsはHTMLでの設定の時だけ必要です。WordPressでの設定の時は不要です。

ちなみに、symbol-defs.svgの中のコードは以下のようになっています。
上記の「SVGスプライトとは」で記述したようにSVGのpathが<defs>のタグでくくられています。

HTMLでの設定方法

（1）svgxuse.jsを読み込みます。
※svgxuse.jsを読み込むことで、IE11でもインラインSVGの<use>による外部SVGファイルの参照が可能となります。
このファイルを読み込まないと、Google Chrome、Firefox、IE11、Androidで表示できません。

<script src="js/svgxuse.js"></script>

（2）アイコンを表示させたいところに以下のようなコードを書きます。
<use>タグには「symbol-defs.svg」に記述されている<symbol id="icon-●●●"〜のid部分を書いてください。
<svg>タグにはスタイルを設定するためにclassを付けます。

<svg class="icon_style">
  <use xlink:href="svg/symbol-defs.svg#icon-tamkun"/>
</svg>

※上記の方法でGoogle ChromeとFirefoxとSafariの最新版、IE11、Edgeの最新版、iOS 11.3.1、Android 4.4.2でも確認できました。

WordPressでの設定方法

（1）<body>直下にsymbol-defs.svgを読み込む下記のコードを書きます。
※WordPressの場合はsvgxuse.jsを読み込む必要はないです。

<?php include_once 'svg/symbol-defs.svg'; ?>

（2）アイコンを表示させたいところに以下のようなコードを書きます。

<svg class="icon_style">
  <use xlink:href="#icon-tamkun"/>
</svg>

上記の方法で、無事タムくんアイコンが表示されました！

OTHER

色やサイズをCSSで指定する

<svg>で指定したclassにスタイルをつけて色とサイズを指定します。

<style>
  .icon_style{
    width: 200px;
    height: 200px;
    fill: #fccf00;
  }
</style>

タムくんが縦横200pxになって、色もTAMカラーの黄色になりました！

その他使えるプロパティ

SVGで指定できるCSSは限られています。
SVG独自のプロパティも用意されていますので、一部ですが紹介します。

<style>
  .icon_style{
    width: 200px;
    height: 200px;
    fill: #fccf00;
    fill-opacity: 0.6; /* 塗りの透明度 */
    stroke: #000; /* 線の色 */
    stroke-opacity: 0.4; /* 線の透明度 */
    stroke-width: 0.5; /* 線のサイズ */
    stroke-dasharray: 3px; /* 線の間隔 */
  }
</style>