SVGのアイコンやロゴの色をCSSで変更する方法

なんとなく記憶があいまいだったため、
illustratorでsvgファイルを書き出した後、
マウスオーバー時や状況に応じて、アイコンやロゴの色をCSSで変更する方法をまとめてみました。

SVGファイルの基本の色指定

まずはSVGファイルの基本となる色指定についてです。
例えば、illustratorの書き出しから
デフォルト設定でsvg形式に保存した場合、SVGファイルをエディターで開くと

<svg xmlns="http://www.w3.org/2000/svg" width="102.75" height="97.72" viewBox="0 0 102.75 97.72"><defs><style>.a{fill:#ff7bac;}</style></defs><polygon class="a" points="51.37 0 67.25 32.17 102.75 37.33 77.06 62.36 83.13 97.72 51.37 81.03 19.62 97.72 25.69 62.36 0 37.33 35.5 32.17 51.37 0"/></svg>

のような表示になっており、fill:〇〇;の部分が描画色になっています。

ちなみに、illustratorで作成する以外の方法だと、
おすすめしたい、アイコンのフリー素材のwebサイト10選のような素材サイトから、
svg画像をダウンロードして使うこともおすすめです。

おすすめしたい、アイコンのフリー素材のwebサイト10選

説明なしで、視覚的に伝えることができるアイテム。日頃から、アイコン様にはとってもお世話になっております。。ちょうど人から聞かれる機会もあった…

HTMLに記述-1 インラインSVGで色変更

次に、svg画像に対して色変更を行っていきます。
1つ目は、<svg>〜</svg>の内容をHTML内に直接記述して、
cssでの色調整を行う方法です。
シンプルでわかりやすく、ロゴなどで使用する時に使えそうです。

svg画像のファイルをエディターで開いたら、中身をコピペします。
cssで色の管理をするため、デフォルトで入っている
<style>〜</style>の、色の記述を削除します。(例:<style>.a{fill:#ff7bac;}</style>)(xmlns=”http://www.w3.org/2000/svg”の部分も、なくても作動します)

    <div class="myicon1">
      <svg width="102.75" height="97.72" viewBox="0 0 102.75 97.72">
        <polygon
          class="a"
          points="51.37 0 67.25 32.17 102.75 37.33 77.06 62.36 83.13 97.72 51.37 81.03 19.62 97.72 25.69 62.36 0 37.33 35.5 32.17 51.37 0"
        />
      </svg>
    </div>

色の調節はcssにfill:〇〇〇; で色を記入します。

    .myicon1 svg {
      fill: #FFA500;
    }
    .myicon1 svg:hover {
      fill: #FF4500;
    }

上記のCSSでは<svg>に対してfillを設定していますが、

1. <div class=”myicon1″> (svgを囲む<div>)
2. <polygon class=”a”> 　(illustratorから保存した時に最初からついていたクラス)

に対して設定をしても、同様の結果になります。

HTMLに記述-2 SVGスプラウト&呼び出して色変更

HTMLに記述する内部svgで、たくさんsvgのデータがある時に便利なのが、svgスプラウトです。
1つ目の方法のように、毎回svgの中身を直書きしているとコードが見づらくなってしまうため、
1つのファイルの中に複数のsvgをまとめておいて、
任意の場所でその中の個々のsvgを呼び出す方法です。

1 呼び出すためのSVGを定義

初めに、svgスプラウトを別の場所にまとめて定義しておきます。
下記のように書きますが、そのままだとシェイプが表示されてしまうため、
display=”none”によって、デフォルトでは非表示にしておきます。
また、記述したいsvgのシェイプが複数ある場合、
<symbol>〜</symbol>内に記述して増やします。

<svg display="none">
<defs>

<symbol id="star" width="102.75" height="97.72" viewBox="0 0 102.75 97.72">
<!-- svg shape -->
<polygon points="51.37 0 67.25 32.17 102.75 37.33 77.06 62.36 83.13 97.72 51.37 81.03 19.62 97.72 25.69 62.36 0 37.33 35.5 32.17 51.37 0"/>
</symbol>

<symbol id="house" width="〇" height="〇" viewBox="〇〇">
<!-- svg shape -->
</symbol>

<symbol id="bunny" width="〇" height="〇" viewBox="〇〇">
<!-- svg shape -->
</symbol>

</defs>
</svg>

2 SVGスプラウトを呼び出し

呼び出したい箇所に、<use>〜</use>タグで呼び出します。

<div class="myicon2">
<svg>
<use  xlink:href="#star"></use>
</svg>
</div>

3 CSSで色を指定

色の指定の仕方は、直接記載した時と同様に設定できます。

    .myicon2 svg {
      fill: #FFA500;
    }
    .myicon2 svg:hover {
      fill: #FF4500;
    }

CSSに記述-1 SVGファイルを変更

ここから以下は、CSSから外部svgファイルを呼び出して、色を変える方法になります。
CSSで呼び出す場合、HTML内に記述する場合のように
fill:〇〇;でシンプルに変えることができないため、少し工夫が必要になります。

外部svgの色変更1つ目の方法は、あらかじめ色違いのsvgファイルを用意しておく方法です。
svgファイルをbackground:url()として呼び出して、
:hover時にファイル自体を変えています。

 <div>
      <span class="myicon3"></span>
    </div>

     .myicon3 {
      display: block;
      width: 200px;
      height: 200px;
      background: transparent url(image/bunny.svg) no-repeat top center /
        contain;
    }
    .myicon3:hover {
      background: transparent url(image/bunny-hover.svg) no-repeat top center /
        contain;
    }

CSSに記述-2 filterを使い色変更

上記の方法だと、色違いのsvgファイルが2つ以上必要になりますが、
外部svgの色変更2つ目の方法は、
filterプロパティを使って色を変えます。

    <div>
      <span class="myicon4"></span>
    </div>

    .myicon4 {
      display: block;
      width: 200px;
      height: 200px;
      background: transparent url(image/bunny.svg) no-repeat top center /　contain;
    }

    .myicon4:hover {
      filter: invert(14%) sepia(49%) saturate(5021%) hue-rotate(225deg)
        brightness(98%) contrast(120%);
    }

filterの設定が直感的な色指定ではないので、設定が簡単にできるように、
こちらのページでエディターが公開されています。

Mask-imageを使い色変更

最後に、外部svgの色変更3つ目は、mask-imageを使った方法です。
今現在(2022年2月)まだ-webkit-をつける必要があります。
(ちなみにIEは対応していません。)

ただ、ブラウザで完璧にサポートされれば、こちらの方法が一番スマートに色変更できそうです。

考え方としては、mask:でsvgのパスを指定し、パスで背景色を切り抜く形となっており、
:hover時は切り抜く背景色を変更しています。

  <div class="mask">
      <span class="mask-image"></span>
    </div>

    .mask {
      width: 200px;
      height: 200px;
    }
    .mask-image {
      display: block;
      width: 100%;
      height: 100%;
      background: #FFA500;
      mask: url("image/bunny.svg") no-repeat center center / contain;
      -webkit-mask: url("image/bunny.svg") no-repeat center center / contain;
    }
    .mask-image:hover{
      background: #FF4500;
    }

※そのままだとurl(“image/bunny.svg”)の部分がエラーが出て正しく認識されなかったため(chromeの設定の関係?)、Visual Studio CodeのLive Server上で表示確認をしました。

おまけ:Mask-imageを使ったボタン

上記のMask-imageを使って、:hover時にsvgアイコンの色も変更するボタンを書いてみました。

    <a href="#" class="btn">CLICK</a>

    a {
      transition: 0.7s;
    }
    :root {
      --main-btn-color: #f3a8bb;
    }
    .btn {
      display: block;
      position: relative;
      text-align: center;
      padding: 12px 0;
      max-width: 200px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: var(--main-btn-color);
      border-radius: 100vh;
      text-decoration: none;
    }
    .btn::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      background: white;
      mask: url("image/bunny.svg") no-repeat center center / contain;
      -webkit-mask: url("image/bunny.svg") no-repeat center center / contain;
    }
    .btn:hover {
      background-color: white;
      color: var(--main-btn-color);
      border: 1px solid var(--main-btn-color);
    }
    .btn:hover::before {
      background: var(--main-btn-color);
    }
    .btn:hover span {
      fill: var(--main-btn-color);
    }

まとめ

以上、インラインSVGで記述する方法と、外部のSVGで呼び出す方法をまとめてみました。

ベクター画像の方が拡大しても荒れないので、用途に合わせつつ、
できる限りSVG画像は積極的に使っていきたいと思います！