background-imageとして使用しているSVGの色を変更したい

Question

:beforeでh2の前に背景画像としてSVGを置きましたが、色の変更ができません。

Sassを使った方法は出てくるのですが、CSSのみでの実装ができるのかできないのかがわからないので、解決方法があれば教えていただきたいです。

<h2>新着記事</h2>

#new h2::before {
  content: "";
  display: inline-block;
  margin-right: 20px;
  width: 35px;
  height: 35px;
  background-image: url(icon-new.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

Answer 1

単純な画像であれば mask-image により、背景色を使うことができます。

#new h2::before {
  content: "";
  display: inline-block;
  margin-right: 20px;
  width: 35px;
  height: 35px;
  vertical-align: middle;
  background-color: red;
  -webkit-mask-image: url("icon-new.svg");
  mask-image: url("icon-new.svg");
}

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

参考
https://kenjimorita.jp/change-color-for-svg-fill-with-css/

Answer 2

提示されている方法（SASS）は、background-image: url("data:image/svg+xml;... という書き方に変換して、（色の部分だけ書き換えて）2つ書いているだけだと思います。

【SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール | 大石制作ブログ】
http://blog.s0014.com/posts/2017-01-19-il-to-svg/

.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)");
}

なので、そうすればできます。SVGを外部ファイルにする場合は色違いの2つをそれぞれ使えばよいです。
（提示の方法（SASS）は同じような事をしています）

1枚の外部SVGの色を変えるのはたぶん出来ないのでは。

Comments

[rokusan]

>外部SVGの色を変えるのはたぶん出来ない
背景画像かどうかに関係なく、そもそも外部SVGの色変更ができないのですね！
できるものだと思い込んでいたので助かりました…！

詳しい解説もありがとうございます、別の機会に参考にさせていただきたいと思います！