SVGの色を簡単に変更する方法

こんにちは。

Webサイトで作るロゴをsvgで作成したのですが、Webサイトの背景色に合わせてロゴの色を変えたくなりました。調べたところインラインSVGというのに、変換するのが一般的なようでした。インラインSVGとは、HTML5からサポートされるようになった、SVGの形式のひとつで直接HTML内にSVGを記述します。

mami
インラインSVGファイルに変換するの面倒だなぁ、単純な図形なら良いけどSVGめっちゃ長いのに、これHTMLに書くのはなんか邪魔くさい・・・

インラインSVGにするくらいなら、必要な色に変えてPNGにしちゃおうかなぁと思っていた矢先、良い方法をネットで見つけまして簡単だったのでご紹介したいと思います。

SVGの色変更の仕方

以下SVGファイルを用意します。(これは自分のサイトのロゴです。)黒で作成します。

以下サイトにアクセスします。
https://codepen.io/sosuke/pen/Pjoqqp

赤枠部分に変更したいカラーを入れて、下にある[Compute Filters]ボタンを押下した後に青枠部分をコピーします。

以下cssを用意して、それをclassで呼び出すだけ。

.filter-gray{
  filter: invert(87%) sepia(4%) saturate(106%) hue-rotate(182deg) brightness(96%) contrast(87%);
}

Home

こんな感じで背景色に合わせて色を変える事が出来ます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)