背景
インライン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等、ホストが存在している状態で確認を。