HOME ブログ Web制作 フロントエンド SVG Background Imageの色をCSSで変える方法

SVG Background Imageの色をCSSで変える方法

frontend frontend

SVG

SVG画像をbackgroundで使いたいことって多いですよね。

background-image: などです。
普通にbackground-image: url(img.svg);みたいな感じで直接SVGファイルを指定して背景にSVGを使うことはできますが、この方法だと色をCSSで変えることができないです。

この方法で色を変えるには直接SVGを編集するしかありません。

そこで今回は、SVG画像を背景で使い、かつ色をCSSで変える方法について解説していきたいと思います。よく使う方法ですがこの際記事にしたいと思います。

SVGの理解

単色・シンプルな画像やアイコンは、ほとんどSVGで作成するようにしています。アイコンはアイコンフォントにした方が使い勝手がいいですが、アイコンではない画像で、かつSVGのメリットがある場合は、SVGを使用します。

各画像形式のメリットについては以下をご参考ください。

jpg、png、svg…何が良い?適切な画像形式・拡張子の選び方
jpg、png、svg…何が良い?適切な画像形式・拡張子の選び方
画像形式にはさまざまなものがありますよね。 JPG、PNG、GIF、SVG、WebP、、、 これらは拡張子と呼ばれ、それ ...

CSSでの管理は汎用性・保守性が良い場合が多い

SVGの色をCSSで変えたいのは、汎用性・保守性が良い場合が多いからです。

特に以下の場合は、CSSでSVGの色を変えたい!と思うでしょう。

  • アイコンフォントを作成するまでもない
  • 手軽に簡単にやりたい
  • アイコン以外で使いたい
  • HTMLにSVGを書きたくない
  • SVG画像の複数箇所の色を変えたい
  • アニメーションで色を変えたい

background-image: url(img.svg);のようにSVGファイルを指定して使っている場合、SVGの色を変えたいといった場合、いちいちSVGファイルを開いて編集する必要があります。

HTMLに直接SVGを記述する方法も、もし同様の形のSVGを複数箇所に使う場合はCSSで管理したほうが汎用性も保守性も良いです。

もちろん、色を変える必要がない・SVGのパス自体を変えることが多い、という場合はbackground-image: url(img.svg);のほうが保守性が良いかも知れません。しかし、SVGを使っている理由として「色を変えたい」といったケースは多いのではないでしょうか。

これらの場合、これから解説する方法が、汎用性・保守性が良いです。

background-imageでSVGを使う方法

そのままファイルを指定するのではなく、SVGのコードをそのままCSSに記述します。

.svg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23000" d="M..." /></svg>');
}

上記コードの中で変更するのは「viewBox=”x,y”」の部分と「d=”…”」だけです。「fill=”%23000″」が色になります。

viewBoxはSVG描画エリアに関する記述です。SVGの描画エリアに合わせて変更してください。

d=は、そのSVG内のパスなどになります。

まずはSVGのコードをコピーしてくる

使いたいSVGのコードを表示させましょう。

すでにSVGファイルがある場合はエディタで開けばコードが表示されます。

イラストレーターなどの場合は、書き出し時にコードを表示することができます。

Illustrator SVG コードを表示

表示したSVGコードの中にあるd属性をコピーしましょう。

<path d="ここをまるまるコピーする">

viewBox値とd属性をコピーし先程のコードに貼り付ける

先程のbackground-image: url(‘data…のd属性に、コピーしてきたSVGコードを貼り付けます。以下のような形です。

色を変える

色を変える場合は以下の箇所を変えます。

<path fill="%23〇〇〇" ...

#ではなく、「%23」です。その後は16進数のカラーコードを入れます。

Sassを使う

SASSのミックスインでまとめると簡単に色を変えることができます。

IE11の対応について

せっかくここまで解説してきましたが問題があります。それはIE11です。

IE11はこれまで解説してきた方法では表示をすることができません。

そもそもこのような方法でSVGを表示させる使用用途のデザインは、IE11で表現自体が難しい場合もあります。

しかし、IE11で何も表示されないのは困ると思うので、表示方法について解説していきます。

SVGコードをBase64にエンコードする

Base64ではなく、URLエンコードでもいいようですが、ここではBase64で説明します。

<svg から始まるすべてのSVGコードをコピーします。

コピーする前の注意点として、fill=”%23〇〇”の部分を通常の#〇〇〇のような形式に変更しておきます。

以下のようなサイトでBase64にコードをエンコードします。

Base64でエンコード – オンラインBase64のエンコーダ

エンコードしたコードをコピーし、以下のように貼り付けます。

.svg {
  display: block;
  width: 34px;
  height: 24px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMnB4IDI0cHgiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0zMS40MiwzLjMxLDI4LjYyLjU3QTIsMiwwLDAsMCwyNy4yMSwwYTEuOTEsMS45MSwwLDAsMC0xLjQuNTdMMTIuMjYsMTMuODMsNi4yLDcuODhhMiwyLDAsMCwwLTEuNDEtLjU3LDEuOTEsMS45MSwwLDAsMC0xLjQuNTdMLjU4LDEwLjYzYTEuOTEsMS45MSwwLDAsMCwwLDIuNzRMMTAuODYsMjMuNDNhMiwyLDAsMCwwLDIuODEsMEwzMS40Miw2LjA2QTEuODUsMS44NSwwLDAsMCwzMiw0LjY5YTEuODUsMS44NSwwLDAsMC0uNTgtMS4zOFoiIC8+PC9zdmc+");
}

注意点として、元のソースの「utf8,」の記述を消しておくようにします。

これでIE11でも表示されます。

でも色変えられないですよね。

色を気軽に変えられるようにするには工夫必要そうです。

よければご参考にしてみてください。

SHARE !

TAG