SVGをCSSで色変更する！deSVGでインラインSVGに変換！

CDNから読み込みます｡

<script src="//cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js"></script>

ダウンロードしたファイルを使う場合は､GitHubからダウンロードします｡

HTMLは普通にimgタグでsrcを指定し､deSVGで使うためにclass名をつけます｡
他で使っていないclass名であればなんでも大丈夫です｡

今回は「desvg」というclass名にします｡

<img class="desvg" src="smile.svg" width="200" height="200" alt="笑顔">

HTML読み込み時に､deSVGを実行します｡
body閉じタグ前に以下を記述します｡
「.desvg」は､HTMLにつけたclass名にします｡

<script>
window.addEventListener('load', function(){
  deSVG('.desvg', true);
});
</script>

これだけで､imgタグのSVGファイルがインラインSVGに変換されます｡

開発ツールで指定したimgタグが以下のようなインラインSVGに変換されていることを確認してください｡

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="desvg replaced-svg"><path d="M10 20a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zM6.5 9a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm7 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm2.16 3a6 6 0 01-11.32 0h11.32z"></path></svg>

SVGの構成にもよりますが､簡単な構成であればsvgタグ内のpathに色を指定します｡
SVGファイルの色指定はfill(塗りつぶし)で指定します｡
CSSで背景色を指定するにはbackground-colorと思ってしまいますが､SVGにはbackground-colorではないので注意してください｡

.desvg path{
  fill: #e00;
}

これで先程の黒色のアイコンSVG画像を赤く塗りつぶすことができました｡

タイトルには色変更する方法と書きましたが､色以外にもいろいろなことが指定でき､アニメーションなどさまざまなカスタマイズに応用できます｡

POINT

SVGの塗りつぶし色指定にはfillを使う！

こちらの記事で詳しく解説されています｡