svgを使い回して色やサイズを容易に変更する方法

同じアイコンを異なる色やサイズで表示させたい時には、svgをインラインで読み込んで使い回すのが便利 

ロゴやアイコンをサイト内で異なる色やサイズで表示させたい場合があると思います。

その時に画像ファイルを使用して、画像のサイズ変更や色を変更したファイルを用意してもいいのですが、必要な枚数作成し、読み込ませるのが大変だと思います。

そのような時に、svgを使用することで、色やサイズをCSSで変更できるため画像を用意する手間が省けると思います。

この記事では、svgを使い回して使用する方法について解説していきます。

デモ

svgを使い回して使用する具体的な手順

今まで、ロゴやアイコンの色やサイズが異なるものを複数使用する場合、以下のように以下の方法で表示させていました。

• svgファイルをその都度読み込ませる
• 色やサイズの異なる画像を作成し、読み込ませる

使用する都度インラインの長いコードを記述したり、
画像を作成させたりするのはなかなか大変だと感じてました。

そんな時にsvgを「symbolタグ」と「useタグ」を使用することで簡単に使い回すことができると知りました。
それからは以下の手順でsvgを使い回して表示させています。

1. 「symbolタグ」で定義
2. 「useタグ」で呼び出し

「symbolタグ」で定義

コードサンプル

<svg class="right-arrow-svg">
    <defs>
        <symbol id="right-arrow" viewBox="0 0 448 512">
            <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
        </symbol>
    </defs>
</svg>

.right-arrow-svg{
    display: none;
}

• 使用するsvgコードを「symbolタグ」を用いて記述。
• 「symbolタグ」には、使い回せるように、呼び出すためのid属性を持たせる。
• 記述したsvgコードは使い回すために定義用のコードのため、display: none;を使用して非表示にする。

この記述で使い回しの準備は完了です 

「useタグ」で呼び出し

コードサンプル

<svg class="right-arrow-svg">
        <symbol id="right-arrow" viewBox="0 0 448 512">
            <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
        </symbol>
</svg>
<svg class="right-arrow"><use href="#right-arrow"></use></svg>

.right-arrow-svg{
    display: none;
}
.right-arrow{
    fill: #47BEFF;
}

あとは、使用したい箇所に「useタグ」を使用して下記のように記述します。

<svg class="right-arrow"><use href="#right-arrow"></use></svg>

• 「useタグ内」のhref属性に、「symbolタグ」で定義したid属性を記述することで呼び出し

svgの使い回しプレビュー

See the Pen Untitled by モレオ (@buppdcuo-the-sans) on CodePen.

svgコードを「symbolタグ」を使用して定義しておけば、その後の利用が非常に楽になります！
特に、ロゴやアイコンなどの要素を変更する必要がある場合、svgを使い回すことで効率的に作業を進めることができます。

プレビューの3つ目や4つ目のように:hoverを使用した色の変更や、アニメーションによる色の変更も可能です！
アレンジしてサイトに取り入れるのも面白いのではないかと思います！

まとめ

今回は「svgファイルを使い回して色やサイズを容易に変更する方法」について紹介しました。
「symbolタグ」と「useタグ」の活用で、svgを簡単に使い回すことができるようになります。
この方法を使うことで、CSSだけで:hover時の色変更やアニメーションも手軽に実装できるので、ぜひ活用してみてください。