SVGを便利に使う方法/使いまわし・色変化

Web制作の実務上、SVG形式のアイコンを使ってボタンを作成したり、リストの頭につけたりすることがあります。

ホバーアクション時に色が反転したり、項目が変わって同じ形のアイコンで色を変えたりをコードで調整する方法をまとめています。

1 SVGコードの見方
- 1.1 SVGコードの基本的な構造
- 1.2 SVGの確認方法
2 svgを呼び出す方法3選
3 SVGの色を変える
4 まとめ：SVGを便利に使う

SVGコードの見方

SVGとは、「Scalable Vector Graphics」(スケーラブルベクターグラフィックス)の事で、品質を損なうことなく、任意のサイズで画像をきれいにレンダリングできる画像形式です。

要は劣化させずに大きさを好きに変えられるんですね。

大きな特徴として、XMLテキストファイルで定義されています。コードになっているんです。

↓もSVGファイルですが、コードで呼び出しています。

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
  <path d="M23.9999 42.0002L8.3999 26.4002H16.7999V7.2002H31.1999V26.4002H39.5999L23.9999 42.0002Z" fill="#3B80FF"/>
</svg>

SVGコードの基本的な構造

svgはテキストファイルで構成されているため、ある程度読み取ることが出来ます。<svg>で囲われている内容によって形が定められます。

要素のカテゴリ	概要・例
基本的な図形	・<rect>(長方形) ・<circle>(円形) ・<line>(線) ・<path>(パス、複雑な形状)
構造とグループ	・<g> (グループ化) ・<svg>(ルート要素)
特殊効果	・<fillter>(フィルタの定義) ・<linearGradient>(線形グラデーション) ・<pattern>(パターン)
テキスト	<text>

ただ、コードを見て形を判断するのは無理だと思います。要素を調整する際に(色を変える等)の目安にするといいですね。

SVGの確認方法

実際にWeb制作でSVGファイルを確認するためには以下の方法が考えられます。

ダウンロードをする
プラグインを使う
一旦表示してみる

ただまぁ、いちいちダウンロードしたりコード書いて表示するのは面倒ですので、VScodeのプラグインを利用して表示させましょう。

SVG Preview

非常にシンプルで追加したら、対象のファイルを選択するだけで画像が見れます。

svgを呼び出す方法3選

実際にSVGを使う際に、以下の4つの方法が考えられます。

<svg>をそのまま設置
<use>を使う方法
imgタグを使う
cssのbackgroundを使う

CSSではパスが変わって表示されない事故などがよくあります。何度も悩まされています(涙

HTMLファイルに組み込むことをおすすめしますが、コードが助長になってしまうことも。

案件で実際に使っている各方法の詳細を紹介します。

<svg>をそのまま設置

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
  <path d="M23.9999 42.0002L8.3999 26.4002H16.7999V7.2002H31.1999V26.4002H39.5999L23.9999 42.0002Z" fill="#3B80FF"/>
</svg>

コードをそのまま貼り付けます。

svgはデフォルトではインライン要素として扱われるため、横並びにしたいときはそのまま配置

縦に並べたい、独立して使いたい場合などは<div>で囲うなどを行います。

<span>の直後に設置

ページトップへ戻る

<p>タグと<div>で囲ったsvg

補足：横に並べたい場合はdisplay: inline-flexを使うほうがわかりやすいです。

<use>を使う(おすすめ)

HTMLでSVGを使おうと思うとコードが助長になってしまうので苦手でしたが、<use>を使うことでスッキリとしたコードになり、おすすめです。

流れとしては、あらかじめsvgを一箇所に保管しておき、<use>で呼び出して使うという事をします。

useでたくさん呼び出す

<svg width="48" height="48" role="img" aria-label="right-arrow">
  <use href="#arrow-down"></use>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
//　symbolタグの中にsvgデータを入れる

    <symbol id="arrow-down" viewBox="0 0 48 48">
        <path d="M23.9999 42.0002L8.3999 26.4002H16.7999V7.2002H31.1999V26.4002H39.5999L23.9999 42.0002Z" fill="#3B80FF" />
    </symbol>
</svg>

<use>の使い方:1,svgデータを格納する

SVGを格納するためのコードを書きます。

HTMLファイルの上部、もしくはsvgをまとめる別のファイルを用意して、まずSVGを宣言します。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">

<symbol id="arrow-down" viewBox="0 0 48 48">

symbolタグに書き込みたい内容は以下２つです。

id：後で呼び出すため
viewBox：svgのサイズ指定するため

symbolの中にpathやcircleなどで始まるsvgのコードを入れます。

複数ある場合は、同じ用にsymbolタグで囲みコードを入れていきます。

<use>の使い方:2,<use>で格納庫から取り出す

サイト上で使うときは<use href="#" > を使用します。

<svg width="48" height="48" role="img" aria-label="right-arrow">
  <use href="#arrow-down"></use>
</svg>

どんなに複雑で長いsvg画像も、１行で実装することが出来ます。

imgタグを使う

<img src="./img/icon.svg" alt="">

svgを画像として呼び出します。

<img src="~~.svg">となるのです。シンプルに画像として表示したいときは楽でいい感じです。

メリット

軽く、簡単に扱える
外部ファイルで管理できる(見た目にわかりやすい)
imgファイルとしてCSSで管理できる

デメリット

アニメーションが効かない
色変更が調整しづらい
動的に色を変えたいときに不向き

設定方法は、pngやjpegと同じようにsrcにパスを入れましょう。

SVGの色を変える

SVGはコード上で色の変化をつけることができるのが最大の特徴だと思っています。

ホバー時に色を反転させてみたり、頭につけるグループによって色を変えてみたり、様々な利用法があります。

基本的に、色については２つの属性で決まります。fillとstrokeです。参考:MDN

この2つの属性をSVGタグに直接入れてもいいのですが、細かい変化や調整が難しいため、CSSを使います。

以下、具体的な方法を紹介します。

css：マスクイメージを使う方法
css：fillを使う方法
css：fillterを使う方法
css：currentColorを使う方法
ツール：ICONS8
複数のSVGを用意する

①：fillとstrokeを指定

svgの色を決める属性、fillとstrokeに色を指定する方法です。

fillはアイコンのメイン部分の色

strokeはアイコンの線の部分の色を指定できます。

物によってはcircleやpathなどに分かれていますが、それぞれにfillを振り分けます。

svgのfillに直接カラーコードを入力することで、指定の色にすることが出来ますが、手間がかかりあまり実用的ではありません。

// svgに直接色指定
<svg>
  <path fill="#ff4444" d="..."/>
  <circle fill="red" cx="50" cy="50" r="20"/>
</svg>

svgのfillにcurrentColorを指定しておき、CSSで指定することでCSSで制御することが出来ます。

<!-- SVG側 -->
<path fill="currentColor" d="..."/>
/* CSS側 */
.svg-icon {
  color: #ff4444; /* この色がfillに適用される */
}

②：マスクイメージ

CSSのmaski-mageを使用します。

画像の上にマスクを掛けるイメージで、色を変化させることが出来ます。

単色だけでなく、グラデーションや一部だけ表示なども。アニメーションと相性が良いです。

線やパーツごとの色には対応しておらず、シンプルなアイコン向けです。

.mask-element {
    /* 背景色（これが実際の表示色になる） */
    background-color: #ff4444;
    
    /* マスク画像 */
    -webkit-mask-image: url("SVGのパス");
    mask-image: url("SVGのパス");
    
    /* マスクサイズ */
    -webkit-mask-size: contain;
    mask-size: contain;
    
    /* 繰り返し設定 */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* 位置 */
    -webkit-mask-position: center;
    mask-position: center;
}

③：filterで明暗を調整

CSSでfilterプロパティを使用します。「l(エル)」は一つです。

こちらは黒くするか白くするか、全体の色味を変えるかなど、文字通り画像にフィルターを掛けたようなイメージで利用できます。

SVGのみならず、pngやjpgのファイル形式、テキストやdiv要素にも使用できます。

SVGで利用する場合は、

SVGに直接クラスを指定
imgタグで呼び出しているとき

などに使えます。

/* 黒色にする */
.svg-black {
  filter: brightness(0);
}

/* 白色にする（黒くしてから明度を上げる） */
.svg-white {
  filter: brightness(0) invert(1);
}

/* グレー色にする */
.svg-gray {
  filter: brightness(0) invert(0.5);
}

/* 特定の色味を付ける（例：青っぽく） */
.svg-blue {
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(200deg);
}