【SVG画像】1つの画像ファイルで複数の色違い画像を使いまわす

SVG画像はコードになってるので、HTMLにそれを直接書けば、CSSで色を変えたり、JSでアニメーションさせたりできるがコードが長いし、HTMLが見づらくなってしまう。

なにかスッキリかく方法はないのかと探して見つけたのが、Useタグで読み込ませる方法です！

まずSVG画像のコードを編集する

icon-star.svg（編集前）

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.30148 ... 11.8421Z" stroke="black" />
</svg>

sample.svg（編集後）

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="star" viewBox="0 0 16 16">
    <path d="M8.30148 ... 11.8421Z"/>
  </symbol>
</svg>

1. コード内の fillやstoroke 指定のような装飾の指定を削除
   CSSで指定するため、コード内に指定があると反映されないため
2. <path>（画像の部分） を <symbol> で囲む
   <symbol>の中身がHTMLで呼び出されます。
3. <svg>の width、height 指定を削除
   こちらもCSSで指定
4. <svg>の viewbox指定を<symbol>に指定
5. <symbol>に idを指定
   HTML側でIDを指定して呼び出します

HTMLに<use>でSVGを呼び出し、使い回す

index.html

<svg class="c-icon">
  <use xlink:href="../img/icon-star.svg#star"></use>
</svg>

<svg class="c-icon c-icon--blue">
  <use xlink:href="../img/icon-star.svg#star"></use>
</svg>

<svg class="c-icon c-icon--24">
  <use xlink:href="../img/icon-star.svg#star"></use>
</svg>

<svg class="c-icon c-icon--outline">
   <use xlink:href="../img/icon-star.svg#star"></use>
</svg>

1. クラス名は<svg>に指定します
2. <use>のxlink:hrefにSVG画像へのパス+SVG画像の<symbol>のIDを指定します

これでSVGが呼び出されます！
ただ色とサイズを指定してないので表示されないのでCSSで指定します。

CSSで色とサイズを追加する

style.scss

.c-icon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  vertical-align: middle;

  fill: black;

  &--blue {
    fill: blue;
  }

  &--24 {
    width: 24px;
    height: 24px;
  }
  &--outline {
    stroke: black;
    fill: transparent;
  }
}

色とサイズ違いを1つのSVG画像で使いまわしが可能になりました。
strokeの指定でアウトラインのスタイルも作れます

SVG画像コードを外部ファイルにしなくても可能

HTML内に呼び出すSVGコードを書いても使い回すことができます。

index.html

<!-- 呼び出すSVGコード -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="star" viewBox="0 0 16 16">
    <path d="M8.09082 ... 12.4226Z" />
  </symbol>
</svg>

<!-- useタグで上のSVGを呼び出す -->
<svg class="c-icon c-icon--red">
  <use xlink:href="#star"></use>
</svg>
<svg class="c-icon c-icon--blue">
  <use xlink:href="#star"></use>
</svg>

この場合は<use>のxlink:hrefで画像パスを書かず、IDだけ指定すればOK

codepen

外部ファイルは色々試しましたがSVGだからかcodepenでうまく読み込んでくれませんでした...

See the Pen Untitled by himeka223 (@himeka223) on CodePen.

会社のロゴで遊んでみた

See the Pen Untitled by himeka223 (@himeka223) on CodePen.

strokeは色々できて楽しそう

互換性について

IE11では<use>の外部ファイル呼び出しが未対応

対応としては外部ファイルで呼び出さず、同じファイル内にSVGコードを書けば問題なく使えます。
でもIEのためだけにHTML内に画像を記載するのも嫌だし、IEのために特別な指定をするのもなんか...
IE対応する場合はimgで読み込ませるのが一番いいのかもしれないです

iOS 9.3では、<use>はキャッシュされない

リロードのたびに読み込まれるので重い...
iOS 9.3、流石に古いので使う人ほぼいないのではと。
参考：【随時更新】iOS バージョン別シェアを発表。日本国内のシェア・全体の推移は？

まとめ

複雑そうで避けてきたSVGだけど1色の色変えなら簡単にできそう！
テンプレのページの色変えや、アイコンのホバーなどで使える機会が増えそうです

参考