SVGスプライト(IE11対応)

Posted on 2018年12月17日

SVGを直に書き込むとコードが長くて見づらい。だからといって画像として読み込むと、色の変更ができない。そこで便利なのがSVGスプライトです。SVGのコードを1つのファイルにまとめて書いておいて、IDだけで呼び出すので、コードを煩雑化することなく色の指定も思いのまま。

現在、検索するとたくさんのサイトでSVGスプライトの作り方が書かれています。ですが、大抵のサイトに載っている問題点がIE11の対応について…

SVGスプライトではSVGコードを「use要素」を使って呼び出すことになるのですが、この「use要素」の外部ファイル呼び出しがIE11では未対応なんですね。外部呼び出しが出来ないだけなので、HTMLファイル自体にSVGをまとめて書いておくなら、当然そのファイル内では何度でも同じコードを呼び出すことができます。でも、それではページをまたいで同じSVGを使うことができない。多くのサイトではこの解決方法として、機能を補完するJSの読み込みを紹介していました(svg4everybody)。これを読み込むとIE11問題が解決するそうです。

ただし、もう一つ問題が…。どうやらこの方法だとiOS 9.3では、use要素を使用するたびにキャッシュされずにその都度SVGの外部ファイルをサーバーまで呼び出しに行くらしい…。要するに重くなる。
SVGスプライトの実装方法 – くらしのマーケット開発ブログ

あと、正直IE11のために余分なJS読みたくない…

困っていたら、いました。天才様が。これで万事解決。
SVGの書き出しおよび表示方法　-　KoToRi Blog【コトリブログ】

これは、SVGをまとめたファイルをPHPのinclude_onceで一度呼び出すというもの。はじめに一度呼び出しているので、「use要素」は外部呼び出しにしなくていいし、サーバーのリクエストも無駄に増やさなくてすむというすぐれもの。ただし、PHPを使うので、PHPが使えない環境下だとNGですが。

詳しい話は、本家様のサイトを見てもらえればと思います。ここでは、方法だけをまとめておきます。

1．まとめたSVGファイルを作成

まず、使用したいSVG画像のコードを1つのファイルにまとめます。ファイル名に決まりはありませんが、拡張子は「.svg」です。

とりあえず例として「all.svg」としました。そこに以下の記述をコピペしましょう。

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- SVG1 -->
        <symbol id="svg-icon1" viewBox="">
            この中にSVGの中身を入れる
        </symbol>

        <!-- SVG2 -->
        <symbol id="svg-icon2" viewBox="">
            この中にSVGの中身を入れる
        </symbol>
    </defs>
</svg>

<defs>

この中にSVGの中身を入れる

</symbol>

この中にSVGの中身を入れる

</symbol>

</defs>

</svg>

SVG画像の分だけsymbol要素を増やしていき、その中にSVG画像のコードを入れていきます。IDは任意の名前に変更し、viewBoxはSVG画像のコードのsvg要素にかかれているものをコピペしてください。

この時、コピペするSVG画像のコードとはSVG要素の中身です。SVG要素自体は外してください。以下のコードで言うなら、<g>~<g>ということになります。

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<g>
    <path class="st0" d="M491.875,156.3…略…1.715-0.343,5.375-1.012,9.824-1.834c14.032,29.374,21.902,62.231,21.91,96.994C481.247,256.411,481.223,256.809,481.223,257.232z
		"></path>
</g>
</svg>

<g>

<path class="st0" d="M491.875,156.3…略…1.715-0.343,5.375-1.012,9.824-1.834c14.032,29.374,21.902,62.231,21.91,96.994C481.247,256.411,481.223,256.809,481.223,257.232z

"></path>

</g>

</svg>

また、コード内にスタイルに関する属性が入っている場合は削除してください。この段階で色の指定が入っていると、呼び出した際に色変更が出来ません。

2.SVGファイルを呼び出す

次に、先程作ったSVGファイルを、HTML上で呼び出します。PHPを使うのでファイルの拡張子は「.php」です。

<?php include_once("assets/images/all.svg"); ?>

1	<?php include_once("assets/images/all.svg"); ?>

ファイルの置き場所に応じて、パスを変更してください。

3.SVG画像を呼び出す

最後に呼び出し方です。呼び出したい場所に以下のコードを記述します。

<svg class="svg-icon">
    <title>SVGタイトル</title>
    <desc>説明</desc>
    <use xlink:href="#svg-icon1"/>
</svg>

<title>SVGタイトル</title>

</svg>

title要素とdesc要素は任意です。xlink:href属性でall.svgの使用したいSVG画像のsymbol要素のIDを指定します。色やサイズの変更は、SVG要素にスタイルを指定することで調節できます。

.svg-icon {
    width: 20px;
    height: 20px;
    fill: #333;
}

.svg-icon {

width: 20px;

height: 20px;

fill: #333;

}