SVG画像がまだ一般的でなかった頃、WEBページ上で画像を効率的に読み込む方法として、一枚の画像に複数の画像を並べ、CSSにより背景画像として切り抜いて表示するスプライト画像という方法がよく使われていました。

現在は使われることの多いブラウザのほとんどがSVG画像に対応しているため、アイコンなどの表示にはSVG画像を使うことが多くなってきました。WEBフォントもよく使われますね。

WEBフォントは一度設定してしまえばサイト内で使いまわししやすく、色の変更も容易なので便利ですが、最初のWEBフォントの作成が少し手間という面もあります。アイコンの追加も少し手間です。また、単色の場合は問題ないですが、複数の色には現状対応ができないため、SVG画像でアイコンを表現するというのは、まだまだ機会としてはあると思います。

WEBフォントの場合は、１つのファイルの中に複数のアイコンを内蔵することができますが、SVG画像を使う場合、ファイルを分ける必要があるように思っていました。

しかし、画像のURLに#によるID指定を行い、SVGファイル内でCSSの:targetセレクタを使った表示の出し分けをすることで、複数のアイコンを1つのSVGファイルにまとめることができることがわかりましたので、方法をご紹介いたします。

DEMO

SVGファイルを作成する

今回はXDでSVGファイルを作ります。

書き出したいアイコンを用意し、一箇所に重ねてグループ化し、SVG形式で書き出します。
それぞれのアイコンが複数のパスからできている場合は、前もってアイコンごとにグループ化してください。

書き出したSVGファイルをテキストエディタで開き、アイコンの親グループとアイコンのタグのIDを調整します。

<svg>の開始タグの直後に以下のstyleを書き足します。

このstyleの指定で、#によるID指定がない場合はグループを非表示、ID指定がある場合は表示するという出し分けが可能になります。

これで、以下のようにHTMLの<img>のsrcを#によりID指定することで、1つのSVGファイルをもとに、呼び出したいアイコンのみを出し分けて表示することが可能になります。