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

Advertisements

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

  1. SVGファイルの基本の色指定
  2. HTMLに記述-1 インラインSVGで色変更
  3. HTMLに記述-2 SVGスプラウト&呼び出して色変更
  4. CSSに記述-1 SVGファイルを変更
  5. CSSに記述-2 filtersを使い色変更
  6. Mask-imageを使い色変更
  7. おまけ:Mask-imageを使ったボタン
  8. まとめ

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

Illustratorでの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:〇〇;の部分が描画色になっています。

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

html内に<svg>〜</svg>の記述を直接追加することで、
色を変更しやすくする方法です。
シンプルでわかりやすく、ロゴなどで使用する時に使えそうです。

書き出して保存をしたsvgファイルをエディターで開いたら、中身をコピペします。
cssで調節をしたいので、デフォルトで入っている
<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: red;
    }
    .myicon1 svg:hover {
      fill: yellow;
    }

<svg>に対してfillを設定していますが、

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

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

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

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

Advertisements

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: red;
    }
    .myicon2 svg:hover {
      fill: yellow;
    }

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

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

あらかじめ色違いの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;
    }
Advertisements

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

上記のやり方だと、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の設定が直感的な色指定ではないので、設定が簡単にできるように、
こちらのページでエディターが公開されています。

6 Mask-imageを使い色変更

cssに記述する方法の一つですが、今現在(2021年10月)まだ-webkit-をつける必要があるため、
他のやり方として分けました。

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

考え方としては、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: black;
      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: red;
    }

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

7 おまけ: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);
    }

8 まとめ

いろいろな方法が使えるようなので、
ベクター画像の方が拡大しても荒れないこともあり、
なるべくsvg画像は積極的に使っていきたいと思います!

SVGのその他の記事はこちら

Advertisements

Similar Posts