SVGの最も有用な使用法の一つ、「複数のベクターグラフィックを一つのデータにまとめて、使いたい時に呼び出す」という「SVGスプライト」があります。

「SVGを使おう！」でもほんの少しお話ししましたが、cssスプライトとの大きな違いとしては、やはり「スタイルを都度変更できる」ところでしょう。 カラーバリエーションやサイズバリエーション、ちょっとした違いごとに同じグラフィックをいくつも作成する必要が無くなります。また、ベクターグラフィックなのでサイズを気にする必要もまったくありません。 極端に言えば、10×10pxのSVGを1000×1000pxに引き延ばそうが何ら問題はないのです。（※画像と同様 描画は重くなりますけれど・・）

今回はこの「SVGスプライトのつくり方」として、基礎となる部分をお話しさせていただきます。
この部分をしっかり理解しておくとIllustratorなどからSVGスプライトを作成するのも非常にスムーズに行えるようになるという部分をお話しさせていただきます。

まずはSVGスプライトの仕組みとキホン

SVGは非常に有用なものではありますが、グラフィックを文字列に置き換えている分、通常のhtml要素に比べてどうしても一要素あたりの記述量が多くなります。
使用したい都度、記述するのはなかなか手間でもあり、効率も良くありません。

しかし、SVGにはxlinkによる「図形の参照」という機能があり、定義しておいた図形をいくつでも複製して使用することができます。この機能を利用してあらかじめ使用したい図形・オブジェクトを一まとめにしておいて必要な時に呼び出すようにするのが「SVGスプライト」です。

ひとまずひな形をつかってみよう

いきなり1から作成、というのはちょっと難易度が高いので、まずはありものを使って

1. SVGスプライトファイルを触ってみる
2. SVGスプライトがどのような構造をしているのか

を確認しながら慣れていきましょう。
ありものとしておすすめなのが、こちら

IcoMoon
https://icomoon.io/app/#/select

アイコンフォントでお馴染みのこのIcoMoonは、ピクトグラムのアイコンなどをダウンロードできるサイトです。（※商用利用可・フリー） 僕もソーシャルアイコンなどでよく利用させてもらっていますが、IcoMoonではアイコンフォントと同様のグラフィックをSVGとしてダウンロードすることもできます。

同サイト内の好きなアイコンを選んでSVGスプライトを作成できるので、ここで一度作成してみるのがいいでしょう。（僕も最初はこうして覚えました）

こちらがアイコン選択画面。選択数の制限は特にない模様です。あきらかに過剰にならない程度で選択してスプライト化してみましょう。

ちなみに、僕は最初「後で足りなかったら嫌だな・・」と思いまったく使わないアイコンまでいっぱい放り込みました。。苦笑（←後で削除するハメになりました。欲張りすぎないように。笑）

※後述していますが「スプライトファイルへの図形・オブジェクトの追加・削除」は簡単に行えるので気楽に選んでまったく問題ありません。

選択し終わったら画面下の「SVG」「Font」とあるボタンの「SVG」を選択するとこのような画面になります。

ここまで入力したら「Download」ボタンを押してダウンロードして下さい。zipファイルを解凍すると、中にスプライトファイルが入っています。

ダウンロードしたSVGスプライトファイルを使用できる状態へ

IcoMoonからスプライトファイルをダウンロードしたら、前回の要領でファイルを開いてみましょう。
実はダウンロードしたままの状態では正しく使用できません。
※一応スプライトファイルをdisplay:noneなどにすれば一見問題なく使用はできているようには見えますが・・

ブラウザで表示させるとこのような感じに表示されると思います。
しかし、本来SVGスプライトファイルは何も表示されてはいけません。

これは「プレビュー用の記述が書きこまれている為」にこのように表示されます。 ダウンロードしたファイル内から該当箇所を見つけ出して削除する必要があります。

こちらがダウンロードしたままの状態のスプライトファイルの内容です。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="80" viewBox="0 0 752 80">
<defs>
<g id="icon-twitter">
	<path class="path1" d="M30.72 6.869c-1.085 0.482-2.248 0.805-3.47 0.952 1.248-0.747 2.206-1.931 2.656-3.341-1.166 0.691-2.459 1.195-3.834 1.466-1.102-1.174-2.672-1.907-4.41-1.907-3.336 0-6.040 2.704-6.040 6.038 0 0.474 0.053 0.934 0.157 1.376-5.019-0.251-9.47-2.656-12.448-6.31-0.522 0.891-0.821 1.93-0.821 3.037 0 2.096 1.067 3.944 2.688 5.027-0.99-0.032-1.922-0.302-2.736-0.755 0 0.026 0 0.050 0 0.075 0 2.926 2.083 5.366 4.845 5.923-0.506 0.138-1.040 0.211-1.592 0.211-0.389 0-0.766-0.037-1.136-0.107 0.768 2.4 3 4.146 5.642 4.194-2.067 1.621-4.67 2.586-7.501 2.586-0.488 0-0.968-0.029-1.44-0.085 2.672 1.714 5.846 2.714 9.259 2.714 11.109 0 17.184-9.203 17.184-17.186 0-0.261-0.005-0.522-0.018-0.781 1.181-0.851 2.203-1.915 3.014-3.126z"></path>
</g>
<g id="icon-facebook">
	<path class="path1" d="M24 6.606h-4.57c-0.541 0-1.144 0.71-1.144 1.662v3.299h5.714v4.704h-5.714v14.128h-5.395v-14.126h-4.891v-4.706h4.891v-2.768c0-3.97 2.755-7.2 6.538-7.2h4.571v5.006z"></path>
</g>
<g id="icon-googleplus">
	<path class="path1" d="M3.184 8.942c0 2.389 0.798 4.115 2.371 5.128 1.288 0.83 2.784 0.955 3.562 0.955 0.189 0 0.339-0.008 0.445-0.014 0 0-0.246 1.605 0.944 3.194l-0.054-0.002c-2.062 0-8.79 0.432-8.79 5.963 0 5.627 6.179 5.912 7.418 5.912 0.098 0 0.154-0.002 0.154-0.002 0.014 0 0.102 0.003 0.253 0.003 0.795 0 2.851-0.099 4.762-1.029 2.477-1.202 3.734-3.294 3.734-6.216 0-2.824-1.914-4.504-3.312-5.733-0.853-0.749-1.59-1.395-1.59-2.024 0-0.64 0.538-1.122 1.219-1.731 1.101-0.986 2.141-2.389 2.141-5.042 0-2.333-0.302-3.898-2.166-4.89 0.195-0.099 0.882-0.171 1.222-0.219 1.010-0.138 2.486-0.294 2.486-1.118v-0.158h-7.357c-0.074 0.002-7.44 0.275-7.44 7.022zM15.061 23.363c0.141 2.25-1.784 3.91-4.674 4.12-2.934 0.216-5.352-1.106-5.493-3.355-0.067-1.080 0.406-2.138 1.336-2.981 0.944-0.853 2.237-1.379 3.646-1.485 0.166-0.010 0.331-0.018 0.496-0.018 2.715 0 4.555 1.597 4.688 3.718zM13.139 7.402c0.722 2.539-0.368 5.194-2.104 5.683-0.2 0.056-0.406 0.085-0.614 0.085-1.592 0-3.168-1.61-3.752-3.827-0.326-1.246-0.301-2.334 0.074-3.382 0.368-1.029 1.029-1.726 1.861-1.96 0.2-0.058 0.408-0.085 0.616-0.085 1.92 0 3.155 0.797 3.92 3.486zM25.538 12.931v-4.8h-3.040v4.8h-4.8v3.040h4.8v4.8h3.040v-4.8h4.8v-3.040h-4.8z"></path>
</g>
</defs>

<g fill="#000000">
	<use xlink:href="#icon-twitter" transform="translate(672 0)"></use>
	<use xlink:href="#icon-facebook" transform="translate(720 0)"></use>
	<use xlink:href="#icon-googleplus" transform="translate(0 48)"></use>
</g>

</svg>

文字量（主に数字）に圧倒されますが、図形要素名（ここではpath）以降の数字はパスの各頂点座標（ペンツールで言うアンカーポイント）の位置を記述しているだけなので、グラフィックに問題が無い場合は一切無視して構いません。

ハイライトしてある17～21行目。ここは「表示はこうなりますよ&使用時はこのように記述するといいですよ」というデモ用の記述です。つまりスプライトファイルには必要ない箇所です。 削除してしまいましょう。
また、前回の記事でも書いた通り1～3行目は省略できます。ここも削除してしまいましょう。

使用する際は上記の削除箇所にならいつつ、下記のように<svg>を親要素としてuse要素（※transform属性はいりません）をコピーして使うようにするとよいでしょう。

<!--html内の使いたい箇所で-->
<svg>
	<use xlink:href="#icon-facebook"></use>
</svg>

また、使用時は下記のように

<svg>
	<title>facebook</title>
	<desc>facebookへのリンクです</desc>
	<use xlink:href="#icon-facebook">
		<filter id="filter1">
		</filter>
	</use>
</svg>

title要素（画像のtitleとほぼ同様）やdesc要素（このsvg要素の説明文）、filterやanimate要素を加えて使用することもできます。

titleやdescを加えることでsvg要素は画像（図形）ながら完全に文章としての意味も持つようになります。

SVGスプライトは記述量が非常に多いので、htmlにそのまま記述することはあまり無いでしょう。多くの場合PHPなどで呼び出して使用することになると思います。
includeする際は下記のように記述するとOKです。
（※ファイル指定は呼び出し元のPHP（or html）ファイルからの相対パスで記述）

<?php include_once 'images/sprites.svg'; ?>

<!--WordPress-->
<?php include_once('images/sprites.svg'); ?>

一応、このように

<?php
include_once 'sprites.svg';
include_once 'sprites2.svg';
?>

複数を同時に読み込ませることができますが SVGスプライトでは複数を読み込ませる意味合いが薄いというかメリットがまるで無いので一つのファイルに全部まとめてしまったほうが良いでしょう。

SVGスプライトの構造

SVGデータはとにかく文字量（主に数字）が多いため圧倒されてしまいますが、簡略化して構造だけを抜き出すと以下のようになります。
基本としては「被参照要素 in 参照用図形（or要素）」の構造です。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><!--「被参照要素」を意味するタグ-->

  <symbol id="obj1" viewBox="x y w h">
    <!--ここに図形の形状を表す内容-->
  </symbol>

  <g id="obj2">
    <!--ここに図形の形状を表す内容-->
  </g>

</defs>
</svg>

※Icomoonなどからダウンロードしたスプライトファイルはsymbol要素ではなくg要素で記述されています。

defs要素という「被参照要素（参照される為の要素）」を定義するタグの中に、使いまわしたいグラフィックやフィルターなどの要素を記述します。 ここに記述した要素は表示されることはなく、useタグなどでページ内でいつでもいくつでも呼び出すことができます。

参照用のグラフィックとしてはsymbol要素とg要素を使用できます。 この二つはどちらでもuse要素で呼び出すことができますが、少々趣が異なります。

g要素

「SVGをつくってみよう[初級編]」で少し触れましたが、いわゆるグループを意味する要素ですが、参照用としてuse要素で参照することができます。

symbol要素

「参照専用の要素」です。この要素はuseで使用されない限り表示されることはありません。displayのスタイル指定も受け付けません。
また、個別のviewBoxを持つ（指定する）ためg要素とwidth,heightの挙動が異なります。（※path要素＋外部cssの場合、挙動にあまり差がないような…？）

defs要素と同じような性質を持っているため、スプライト専用のデータでsymbol要素のみで記述した場合はdefs要素を省いてしまっても問題はないと思われます。（結構省略している方のほうが多いかな・・？と思います）

一応、仕様書には下記のようにありますが

参照先の要素は、可能な限り defs 要素内に定義することが推奨される。 常に参照を通して利用される要素は： altGlyphDef, clipPath, cursor, filter, linearGradient, marker, mask, pattern, radialGradient, symbol である。 これらの要素は defs 要素内で定義した方が文書内容も理解し易くなり、アクセシビリティも向上する。

文書構造-SVG1.1「再利用可能な内容とdefs要素」より

これはSVG要素内で参照用要素を参照したり・・といったケースではこのほうがいいよ、といった感じかな・・と。
SVGスプライトは参照する為だけのファイルなので、内包要素はすべて参照用要素。文章内容は単純明快です。あまり細かくマークアップしすぎる必要はないかもしれません。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><!--「被参照要素」を意味するタグ-->

  <filter id="filter1">
    <!--filtterの内容-->
  </filter>

  <symbol id="obj1" viewBox="x y w h">
    <!---->
  </symbol>

  <g id="oby2">
  </g>

</defs>
</svg>

また、このようにスプライト内にfilter要素やanimate要素を入れておけば 同じくfilter属性やcss「filter:url(#xxx)」で呼び出すことができる（＝少ない記述でパーツごとにドロップシャドウ・グラデーションの有無、アニメーションの有無を切り替えられる）ようになり、SVGスプライトの汎用性がさらに高まります。

SVGスプライトの素晴らしい点

メンテナンス性

アイコンフォントでは「あ、一つ忘れてた！」という時、また新たにフォントファイルを作成する必要がありました。（eotやwoffファイルなんて編集できるものではないかな・・と思うので）
しかし、SVGスプライトの場合は忘れていたグラフィックのデータだけを追加することも容易です。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!--元々のデータ-->
  <symbol id="obj1" viewBox="x y w h">
  </symbol>
  <symbol id="obj2" viewBox="x y w h">
  </symbol>
  <symbol id="obj3" viewBox="x y w h">
  </symbol>

<!--追加したいグラフィックデータ-->
  <symbol id="new_obj" viewBox="x y w h">
  </symbol>

</defs>
</svg>

このように、defs要素内に追加したいグラフィックのデータを加えるだけでOKです。（別に最後でなくても構いません） 同様に、フラフィックを入替えたい際や削除したい際も対象のsymbolないしg要素を入替え・削除するだけでOK。

ちょっと試しに追加・編集してみましょう。

簡単な例を使って、SVGスプライトファイルにグラフィックを追加してみるという編集を実践してみましょう。
この記事内に埋め込んである「CodePen」は記述されている内容を閲覧者が編集することができます。（元ファイルには影響ありません）

例題1

こちらのxml文章をコード内の「ここに要素を追加」と記述されている箇所へ挿入してみましょう。

<symbol id="icon-thumbs-up" viewBox="0 0 32 32">
   <path d="M29 18c2.281 0 1 6-1 6 1 0 0 5-2 5 0 2-2 3-4 3-8.448 0-5.477-2.114-14-3v-16c7.529-2.258 15-7.92 15-13 1.656 0 6 2 0 12 0 0 5 0 6 0 3 0 2 6 0 6zM6 13v16h2v1h-4c-1.1 0-2-1.35-2-3v-12c0-1.65 0.9-3 2-3h4v1h-2z" />
</symbol>

<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <symbol id="icon-twitter" viewBox="0 0 32 32">
	<path class="path1" d="M31.52 6.869c-1.085 0.482-2.248 0.805-3.47 0.952 1.248-0.747 2.206-1.931 2.656-3.341-1.166 0.691-2.459 1.195-3.834 1.466-1.102-1.174-2.672-1.907-4.41-1.907-3.336 0-6.040 2.704-6.040 6.038 0 0.474 0.053 0.934 0.157 1.376-5.019-0.251-9.47-2.656-12.448-6.31-0.522 0.891-0.821 1.93-0.821 3.037 0 2.096 1.067 3.944 2.688 5.027-0.99-0.032-1.922-0.302-2.736-0.755 0 0.026 0 0.050 0 0.075 0 2.926 2.083 5.366 4.845 5.923-0.506 0.138-1.040 0.211-1.592 0.211-0.389 0-0.766-0.037-1.136-0.107 0.768 2.4 3 4.146 5.642 4.194-2.067 1.621-4.67 2.586-7.501 2.586-0.488 0-0.968-0.029-1.44-0.085 2.672 1.714 5.846 2.714 9.259 2.714 11.109 0 17.184-9.203 17.184-17.186 0-0.261-0.005-0.522-0.018-0.781 1.181-0.851 2.203-1.915 3.014-3.126z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 32 32">
	<path class="path1" d="M24 6.606h-4.57c-0.541 0-1.144 0.71-1.144 1.662v3.299h5.714v4.704h-5.714v14.128h-5.395v-14.126h-4.891v-4.706h4.891v-2.768c0-3.97 2.755-7.2 6.538-7.2h4.571v5.006z"></path>
</symbol>
<symbol id="icon-googleplus" viewBox="0 0 32 32">
	<path class="path1" d="M3.984 8.942c0 2.389 0.798 4.115 2.371 5.128 1.288 0.83 2.784 0.955 3.562 0.955 0.189 0 0.339-0.008 0.445-0.014 0 0-0.246 1.605 0.944 3.194l-0.054-0.002c-2.062 0-8.79 0.432-8.79 5.963 0 5.627 6.179 5.912 7.418 5.912 0.098 0 0.154-0.002 0.154-0.002 0.014 0 0.102 0.003 0.253 0.003 0.795 0 2.851-0.099 4.762-1.029 2.477-1.202 3.734-3.294 3.734-6.216 0-2.824-1.914-4.504-3.312-5.733-0.853-0.749-1.59-1.395-1.59-2.024 0-0.64 0.538-1.122 1.219-1.731 1.101-0.986 2.141-2.389 2.141-5.042 0-2.333-0.302-3.898-2.166-4.89 0.195-0.099 0.882-0.171 1.222-0.219 1.010-0.138 2.486-0.294 2.486-1.118v-0.158h-7.357c-0.074 0.002-7.44 0.275-7.44 7.022zM15.861 23.363c0.141 2.25-1.784 3.91-4.674 4.12-2.934 0.216-5.352-1.106-5.493-3.355-0.067-1.080 0.406-2.138 1.336-2.981 0.944-0.853 2.237-1.379 3.646-1.485 0.166-0.010 0.331-0.018 0.496-0.018 2.715 0 4.555 1.597 4.688 3.718zM13.939 7.402c0.722 2.539-0.368 5.194-2.104 5.683-0.2 0.056-0.406 0.085-0.614 0.085-1.592 0-3.168-1.61-3.752-3.827-0.326-1.246-0.301-2.334 0.074-3.382 0.368-1.029 1.029-1.726 1.861-1.96 0.2-0.058 0.408-0.085 0.616-0.085 1.92 0 3.155 0.797 3.92 3.486zM26.338 12.931v-4.8h-3.040v4.8h-4.8v3.040h4.8v4.8h3.040v-4.8h4.8v-3.040h-4.8z"></path>
</symbol>
<!--ここにBlogの「例題1」のコードをコピペしてみましょう-->

</defs>
</svg>

<div id="views">
<svg><use xlink:href="#icon-facebook"></use></svg>
<svg><use xlink:href="#icon-twitter"></use></svg>
<svg><use xlink:href="#icon-googleplus"></use></svg>
<svg class="good"><use xlink:href="#icon-thumbs-up"></use></svg>
<//div>

※右上の「Edit on CODEPEN」をクリックすると別窓で編集画面が開きます。
編集画面でコピー&ペーストして、表示がどのように変わるか確認してみましょう。

コピペが完了したら「Result」で確認してみましょう。

一つアイコンが増えているのがお分かりいただけるでしょう。
そう、たったこれだけのことでSVGスプライト内のグラフィックを追加できます。

例題2

今度はもう少し実践的に。
元のSVGスプライト内に一つ参照用図形を加え、それをhtml内で呼び出してみましょう。
●参照用図形のidはご自身で指定して下さい。

<!--参照用図形-->
<symbol id="" vieBox="0 0 32 32">
   <path d="M16 32c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16zM16 3c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13 5.82-13 13-13zM6 16v2c0 4.4 3.6 8 8 8h4c4.4 0 8-3.6 8-8v-2h-20zM12 23.656c-0.829-0.296-1.591-0.776-2.236-1.42-1.138-1.138-1.764-2.642-1.764-4.236h4v5.656zM18 24h-4v-6h4v6zM22.236 22.236c-0.645 0.645-1.407 1.125-2.236 1.42v-5.656h4c0 1.594-0.627 3.098-1.764 4.236zM7.042 12c0 0 0 0 0 0 0.305 0 0.566-0.22 0.616-0.522 0.192-1.146 1.177-1.978 2.341-1.978s2.149 0.832 2.341 1.978c0.050 0.301 0.311 0.522 0.616 0.522s0.566-0.22 0.616-0.521c0.034-0.201 0.051-0.404 0.051-0.604 0-1.999-1.626-3.625-3.625-3.625s-3.625 1.626-3.625 3.625c0 0.199 0.017 0.402 0.051 0.604 0.051 0.301 0.311 0.521 0.616 0.521zM19.042 12c0 0 0 0 0 0 0.305 0 0.566-0.22 0.616-0.522 0.192-1.146 1.177-1.978 2.341-1.978s2.149 0.832 2.341 1.978c0.050 0.301 0.311 0.522 0.616 0.522s0.566-0.22 0.616-0.521c0.034-0.201 0.051-0.404 0.051-0.604 0-1.999-1.626-3.625-3.625-3.625s-3.625 1.626-3.625 3.625c0 0.199 0.017 0.402 0.051 0.604 0.051 0.301 0.311 0.521 0.617 0.521z" />
</symbol>

<!--呼び出し時のコード-->
<svg class="good">
  <use xlink:href="#" />
</svg>

呼び出す際はuse要素を用いて、xlink属性に対象の（ご自身でつけた）idをハッシュリンク（#ではじまるリンク）で指定すればOKです。

<!--「例題2」-->
<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-eye" viewBox="0 0 32 32">
	<path class="path1" d="M16 6c-6.979 0-13.028 4.064-16 10 2.972 5.936 9.021 10 16 10s13.027-4.064 16-10c-2.972-5.936-9.021-10-16-10zM23.889 11.303c1.88 1.199 3.473 2.805 4.67 4.697-1.197 1.891-2.79 3.498-4.67 4.697-2.362 1.507-5.090 2.303-7.889 2.303s-5.527-0.796-7.889-2.303c-1.88-1.199-3.473-2.805-4.67-4.697 1.197-1.891 2.79-3.498 4.67-4.697 0.122-0.078 0.246-0.154 0.371-0.228-0.311 0.854-0.482 1.776-0.482 2.737 0 4.418 3.582 8 8 8s8-3.582 8-8c0-0.962-0.17-1.883-0.482-2.737 0.124 0.074 0.248 0.15 0.371 0.228zM16 12.813c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z" />
</symbol>
<symbol id="icon-heart" viewBox="0 0 32 32">
	<path class="path1" d="M27.502 6.642c-2.675-2.456-7.013-2.456-9.688 0l-1.814 1.667-1.816-1.667c-2.675-2.456-7.011-2.456-9.686 0-3.010 2.762-3.010 7.238 0 10.002l11.502 10.557 11.502-10.557c3.010-2.763 3.010-7.24 0-10.002z" />
</symbol>
<symbol id="icon-search" viewBox="0 0 32 32">
	<path class="path1" d="M28.072 24.749l-6.046-6.046c0.912-1.499 1.437-3.256 1.437-5.139 0-5.466-4.738-10.203-10.205-10.203-5.466 0-9.898 4.432-9.898 9.898 0 5.467 4.736 10.205 10.203 10.205 1.818 0 3.52-0.493 4.984-1.349l6.078 6.080c0.597 0.595 1.56 0.595 2.154 0l1.509-1.507c0.594-0.595 0.378-1.344-0.216-1.938zM6.406 13.258c0-3.784 3.067-6.853 6.851-6.853 3.786 0 7.158 3.373 7.158 7.158s-3.067 6.853-6.853 6.853-7.157-3.373-7.157-7.158z" />
</symbol>
<!--ここに参照用図形-->

</defs>
</svg>

<div id="views">
<!--ここに呼び出し時のコードを-->
  
</div>

コードをご覧いただくと分かると思いますが、追加した要素以外にもいくつかsymbol要素が記述されていますね？ ということは、「呼び出し時のコード」の対象のハッシュリンクを変えれば、違う図形を呼び出せます。

試しに、今回追加したもの以外の図形のidを指定してみましょう。 useで呼び出した図形が変わりますね？
また、同様にuse要素を複数記述しつつxlinkの対象をそれぞれのsymbol要素にすればすべて表示することができますし、同じ図形を複数呼び出せることも確認できます。

これがSVGスプライトの仕組みです。
簡単でしょう？

まとめ

またちょっと長くなってしまいましたが

• SVGスプライトファイルの構造がどのようなものか
• SVGスプライトの仕組みがどのようになっているのか
• use要素を使っての使用方法
• SVGスプライトへの新たなグラフィックの追加方法

をご理解いただけたと思います。

次回は「IllustratorなどのグラフィックソフトでSVGスプライトファイルを作成する」をお届けしたいと思います。