外部SVGスプライトのsvgxuse.jsによるIE11対応

背景

インラインSVGの<use>による外部SVGファイルの参照は、SVGファイルの一元化やコード軽量化などに一役買っている。
しかし、そのままではIE11では表示されない。IE11では<use>タグの外部参照は対応していないのだ。

そのため、泣く泣く<img>タグに変更したり、インラインSVGの<defs>に書き換えた方も多くいらっしゃるのではないだろうか。

しかし、インラインSVGの<defs>に書き換えると、そもそも外部SVGファイルとして一元管理ができなくなる上、html内のコード量も増える。
その他の手法として<img>に置き換える手法もあるが、この場合はスプライトできなくなってしまう。しかも、CSSによるfillの調整もできないので、「ロゴをスクロール時に白抜き・デフォルトカラーに切り替えたい」等には対応できない。

そこで今回、IcoMoonでのファイルであればIE11でも正常に表示がされていたので何が違うか探ってみると、「svgxuse.js」というJSが読み込まれていた。

この、IcoMoonで使用しているsvgxuse.jsを読み込むことで、IE11でもインラインSVGの<use>による外部SVGファイルの参照が可能となった。

以下はその手順の覚書である。
（なお、svgxuse.jsで何をどうしているのかは割愛させて頂く。あくまで「こうしたら出来た」の共有のつもりなので。）

基本的な手順

• AIでロゴを作成する
• SVG形式で保存
• SVGファイルをエディタで開き、グルーピングしたいパスを<g>タグ等で囲む（<symbol>タグ等でも可）
• <g id="baseColor”> のようにIDを付与

HTML内で下記のように<use>タグによりSVGファイルへのパスを記述
※外部参照になるため、元のSVGファイルのviewBox属性は必須

<header>
    <h1>
        <a href="/">
            <svg viewBox="0 0 928 240">
                <use xlink:href='/_assets/img/common/logo.svg#baseColor' class="baseColor"></use>
                <use xlink:href='/_assets/img/common/logo.svg#subColor' class="subColor"></use>
            </svg>
        </a>
    </h1>
</header>

IE11への対応

このままの状態ではタグの外部参照はIE11では対応していないため、表示されない。

SVGの元データのコードをインラインSVGで記述し<defs>でwrap（その場合はCSSで非表示に）する方法もあるが、コードが冗長になってしまうためJSによる外部参照を行う。

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

svgxuse.js
html内でdeferにより参照する。
※Webサーバー上でホストされている必要があるため、ローカルでのプレビュー時はlocalhost等、ホストが存在している状態で確認を。