ほんっとにはじめてのHTML5とCSS3

SVGスプライト サンプル

複数の図形を1つのSVGファイルにまとめ、それぞれの図形を呼び出して使います。
ここではレストランのメニューなどで使われる「アレルゲン表示のアイコン」をSVGで作ってみました。

3つのアイコン を Illustrator で作って「SVGファイル」として書き出します。拡張子を「.svg」にすればOK。
SVGファイル内で、各アイコン画像を囲む <g>要素を <symbol>に書き換えます。
viewBox属性も <symbol>に書いておけば、CSSでサイズを自由に変更できます。
<svg>要素はインラインCSSで display: none にしておくか、クラスやID名を付けて外部CSSで display: none を指定します。

SVGファイル

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="allergen-icon">
 <symbol id="milk" viewBox="0 0 47 50">
  （長いので略）
 </symbol>
 <symbol id="wheat" viewBox="0 0 47 50">
  （長いので略）
 </symbol>
 <symbol id="egg" viewBox="0 0 47 50">
  （長いので略）
 </symbol>
</svg>

HTML側で SVGファイルの内容を呼びします。jQueryを使用するので呼び出しておくのを忘れずに。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
　<!--jqueryのバージョンは3系でもOK。古い1系でも使えました-->

以下のJSコードで <body>の先頭にSVGファイルの内容が読み込まれます。
（で、その分の空間ができてしまうので、大元のsvgを display: none にしておきます）

<script>
  $.ajax({
    type: 'get',
    url: './img/allergen_icon.svg'
  }).done(function(data) {
    var svg = $(data).find('svg');
    $('body').prepend(svg);　<!--<body>要素の先頭にSVGファイルが読み込まれます-->
  });
</script>
</body>

参考サイト：外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する | UNORTHODOX WORKBOOK | Blog

各画像を呼び出すには、<svg>要素と<use>要素を使います。
<svg>要素にクラス名を付けて、CSSでサイズなどを編集できます。

HTML

<div>
 <h3>キッズハンバーグ<span>（乳・小麦・卵は使用しておりません）</span></h3>
 <svg class="al-icon"><use xlink:href="#milk"/></svg>
 <svg class="al-icon"><use xlink:href="#wheat"/></svg>
 <svg class="al-icon"><use xlink:href="#egg"/></svg>
</div>

CSS

svg.allergen-icon {display:none}　/*SVGスプライト内のsvgを display:none にしておきます*/
svg.al-icon {　/*HTML上に配置する各アイコンの指定です*/
    margin:0 10px 0 0;
    width:104px;　/*サイズの指定（拡大になるけどキレイ）*/
    height:110px;
    padding:5px;　/*paddingはドロップシャドウが入るように指定しています*/
    -webkit-filter: drop-shadow(2px 2px 2px #ccc);　/*ドロップシャドウ（ちょっと古めのブラウザ用）*/
    filter: drop-shadow(2px 2px 2px #ccc)}　/*ドロップシャドウ*/