SVGスプライトの利用② 「使い方」

サツキ: トリック or トリート！とりあえずお菓子ください。

皆さん、こんにちは。サツキです。

以前の記事でSVGスプライトについてお話させていただいたことがあるのですが、その記事の中では「作成方法」にメインの焦点を当ててお話をさせていただきました。
ですので、今回は実際の「使い方」に焦点を当ててお話をさせていただこうかと思います。

以前の記事をまだ見ていない方は以下のURLより御覧ください。
SVGスプライトの利用① 「作成方法」

SVGスプライトの基本的な利用方法（前回までの簡単なおさらい）

それでは実際にSVGスプライトの基本的な利用方法について説明していこうと思いますが、使用するSVGファイルについては上記に記載の以前の記事をご覧になるなどしていただいて予めご用意ください。
この記事の中では、「SVG」というテキストをパス化したサンプルで説明をさせていただこうと思います。

以下は上記のサンプルの実際のコードになります。
下記のコードはこの後で説明させていただく実践的な利用法方のためにそれぞれの <path> を <g> タグでグループ化した上でIDを付与しています。

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="svg-sprite" viewBox="0 0 900 350">
      <g id="path-s">
        <path d="M218.43,186.68c.72,6.48,2,9.72,4.68,13.32,4.32,5.4,11.88,8.46,21.06,8.46,13.86,0,22.14-6.12,22.14-16.2,0-5.58-2.88-10.44-7.56-12.6-3.78-1.8-8.28-3.06-27-7.38-16.56-3.6-22.32-5.76-29-10.44-11.34-7.92-17.46-20-17.46-34.56,0-27.71,22.32-45.17,57.78-45.17,22.86,0,40.32,7,50,20.52,4.5,5.94,6.66,11.33,9,21.59L264,128.36c-2.16-11.69-8.64-16.56-22.32-16.56-11,0-19.08,6-19.08,14.22,0,5,2.7,8.82,8.46,11.52,3.6,1.62,3.6,1.62,24.84,5.94,13.68,2.88,22.32,5.94,29.16,10.26,13,8.1,19.44,20.16,19.44,36.72,0,13.5-4.32,25-12.6,33.12-10.44,10.08-26.28,15.3-47.34,15.3-15.3,0-30.42-3.24-40.14-8.82A42.55,42.55,0,0,1,185,207c-1.8-4.32-2.7-8.46-4-16.74Z" />
      </g>
      <g id="path-v">
        <path d="M421.65,191.72c1.44,4.86,1.44,4.86,3.42,12.42,2.16-7.92,2.52-9,3.42-12.42l26.1-86.57c2.34-8.28,3.6-13.32,4.14-19.44H501c-2.52,5.4-4.14,9.54-8.64,22L454.23,216a157.55,157.55,0,0,0-5.76,19.44h-46.8A141.18,141.18,0,0,0,395.91,216L357.57,107.67c-3.6-10.44-5.4-14.94-8.46-22h42.12a127.71,127.71,0,0,0,4.32,19.44Z" />
      </g>
      <g id="path-g">
        <path d="M636.75,180.74c-9.18,0-12.24.18-17.82.9V149.78c6.66.9,11,1.08,23.57,1.08h14.4c9.18,0,15.84-.18,23.76-.9-.9,6.84-1.26,12.78-1.26,24.48V194.6c0,12.78.18,18.54,1.26,26.82-9.9,6.3-14.76,8.64-22.86,11.34a120.22,120.22,0,0,1-38.15,6.12c-22.86,0-40.68-6.3-53.46-19.26C552.51,205.94,545,184.52,545,159.86c0-47.34,28.62-77.39,74-77.39,22.49,0,39.59,7,51.47,21.41,4.86,5.58,7.74,11,10.62,19.62L644.3,132c-2-6.48-4.13-9.9-8.09-13-4.68-3.78-10.62-5.58-18.18-5.58-23,0-35.64,16.74-35.64,47,0,16.74,3.78,29.7,11,37.62,5.76,6.3,14.58,9.72,25.92,9.72a53.87,53.87,0,0,0,26.09-6.48V180.74Z" />
      </g>
    </symbol>
  </defs>
</svg>

1. SVGファイルをHTML内で読み込む

SVGファイルをサーバーにアップロードしていただき、HTMLの <body> のすぐ後でインクルードしてください。

<body>
<?php include_once( '/ -- ファイルまでのPATH -- /sprite01.svg' ); ?>
<!--  コンテンツHTML 省略  -->
</body>

2. SVGを表示させる

SVGを表示したいHTML内の任意の場所で以下のようにコードを記述し、SVGを表示させる。

<svg viewBox="0 0 900 350">
  <!--  以下のuseのxlink:hrefはSVGアイコンのsymbolタグのidを指定します。  -->
  <use xlink:href="#svg-sprite"></use>
</svg>

上記、「1,2」の手順でSVGスプライトは利用可能です。
特に難しいこともないのでここまでは問題なく理解できるかと思います。

次はもう少し実践的な利用方法を見ていこうかと思います。

SVGスプライトのより実践的な利用方法

SVGスプライトのより実践的な利用方法をこれから説明いたします。
具体的にはSVGの塗りの色や線の変更や簡単なアニメーションの実装などを行っていきたいと思います。

塗りの色の変更

以下のようにSVGとCSSを記載することでSVGの色を変更することができます。

<svg class="svg01" viewBox="0 0 900 350">
  <use xlink:href="#svg-sprite"></use>
</svg>

<style>
  .svg01 {
    fill: red; <!--  塗りの色を指定します。  -->
    fill-opacity: 0.5; <!--  塗りの透明度を指定します。  -->
  }
</style>

もしそれぞれの <path> ごとに色を変更したい場合は以下のようにすることで対応可能です。

<svg class="svg02" viewBox="0 0 900 350">
  <!--  個別にグループ化した<g>タグのIDをそれぞれ指定します。  -->
  <use xlink:href="#path-s" class="path-s"></use>
  <use xlink:href="#path-v" class="path-v"></use>
  <use xlink:href="#path-g" class="path-g"></use>
</svg>

<style>
  .svg02 .path-s {
    fill: red;
  }
  .svg02 .path-v {
    fill: blue;
  }
  .svg02 .path-g {
    fill: green;
  }
</style>

線の変更

以下のようにSVGとCSSを記載することでSVGの線を変更することができます。

<svg class="svg03" viewBox="0 0 900 350">
  <use xlink:href="#svg-sprite"></use>
</svg>

<style>
  .svg03 {
    fill: transparent; <!--  わかりやすくするために塗りを透明にしています。  -->
    stroke: pink; <!--  線の色を指定します。  -->
    stroke-width: 5px; <!--  線の太さを指定します。  -->
    stroke-opacity: .5; <!--  線の透明度を指定します。  -->
    stroke-dasharray: 15 5; <!--  線の間隔を指定します。点線や破線といったパターンにすることが可能です。  -->
  }
</style>

上記以外にも、「stroke-linecap（パスの端の部分の形状を指定）」「stroke-linejoin（パスのつなぎ目の部分の形状を指定）」「stroke-dashoffset（線の始まりの位置を指定）」といったプロパティがありますので、興味のある方はぜひ一度調べてみてください。
「stroke-dashoffset（線の始まりの位置を指定）」に関してはこのあと説明するSVGアニメーション内で簡単に触れさせていただきます。

SVGアニメーション

それでは、最後にこれまで見てきたSVGに関するCSSプロパティを使い簡単なアニメーションをさせてみようと思います。
下記のように「@keyframes」を設定し、それぞれのパスに設定することで最初に線が描かれた後に、フェードで塗りの色がつくアニメーションを簡単に実装することができます。

<svg class="svg04" viewBox="0 0 900 350">
  <use xlink:href="#path-s" class="path-s"></use>
  <use xlink:href="#path-v" class="path-v"></use>
  <use xlink:href="#path-g" class="path-g"></use>
</svg>

<style>
  .svg04 {
    fill: #111;
    stroke: #111;
    stroke-width: 5px;
  }
  .svg04 .path-s {
    animation: txt 5s ease-in both infinite;
  }
  .svg04 .path-v {
    animation: txt 5s .5s ease-in both infinite;
  }
  .svg04 .path-g {
    animation: txt 5s 1s ease-in both infinite;
  }
  @keyframes txt {
    0% {
      fill: transparent; <!--  線描画のアニメーションをわかりやすくするために塗りを透明にしています。  -->
      <!--  「stroke-dasharray（線の間隔）」を2000px（アウトラインの長さを超える任意の値）に設定し、
      「stroke-dashoffset（線の開始位置）」にも同じ値を設定することで初期状態でアウトライン（線）がない状態にしています。  -->
      stroke-dasharray: 2000px;
      stroke-dashoffset: 2000px;
    }
    15%{
      fill: transparent;
      <!--  「stroke-dashoffset（線の開始位置）」の値を徐々に「0」に近づけることで、
      線を描画しているようなアニメーションをさせています。  -->
      stroke-dashoffset: 0;
    }
    45%{
      fill: transparent;
    }
    70%{
      fill: #111;
    }
  }
</style>

まとめ

ここまでSVGスプライトの具体的な利用方法について説明しましたが、いかがでしたか？
SVGスプライト使用すれば、矢印などのアイコンが表示する大きさに関わらず常にキレイに表示できる上に、簡単に色の変更等も可能なのでとても使い勝手がいいのではないかと思います。
興味を持った方はぜひ一度チャレンジしてみてください。
それでは、最後までお付き合いありがとうございました。

コラム