SVG画像をCSSで色指定してcolorが効かないときの対処法

スマホファーストが叫ばれるようになって久しい昨今ですが、Retina対応にピクセルベースで2x画像を用意するのは大変な労力です。

そこで注目されるのがベクター形式のSVG(Scalable Vector Graphics)フォーマット。直接扱ったことがなくてもWebフォントなどで間接的に触ってる方も多いでしょう。

ただ、CSSで手軽に装飾できるWebフォントと違ってSVG形式データを直接叩くのは多少癖があるかも知れません。特にウェブフォントの延長でSVG画像を扱うとき最初につまづきがちなのがcolor指定じゃないでしょうか。

SVG画像における色指定の概念

SVG画像の着色はHTML5の塗り操作（ painting operation ）にて行います。

中でもパスオブジェクトの塗りは枠線を塗るstrokeと内部を塗るfillプロパティに分かれるのが特徴。SVG画像の元データがIllustratorなどで作成されることを考えればイメージしやすいと思います。

ここでHTMLに埋め込まれたSVG画像を単純にcolorで塗ろうと思っても、マッチングが微妙に成立してないので指定がうまく効きません。

SVGにCSSで色指定をする

指定が効かないのは正確に値を受け取れてないだけなので、そこがきちんと通るように修正します。

【HTML】
<div class="testSVG">
  <svg>
  <circle r="10" cx="20" cy="20">
  </svg>
</div>


【CSS】
.testSVG { color: #F00; }
.testSVG > svg { fill: currentColor; }


パスごとに細かく指定したいときは

一連の画像データに複数パスが含まれるときは、各オブジェクトに class や id を設置して操作します。常に同じ値を与えるパス群があれば <g></g> タグでグループ化すると効率的でしょう。

ペイント型 currentColor

currentColor指定は、親要素の色指定のうち、最後に一致した値を継承するものです。カラープロファイルのうち一致するものが見つからなければ無視されます。

SVGフォーマットの対応状況

HTMLでベクター扱えるの便利とは言え、実際のところ対応状況はどうなのよ！…ということで2015年夏現在の対応ブラウザをCan I Useで引くとこんな感じでした。

Can I use… Support tables for HTML5, CSS3, etc

最も基本となるSVG1.1の対応状況は95.79%。IE8に対応しなければならない環境を除いて今や十分に使える技術と言えます。

ベクター画像であることを生かしてJavaScriptと連携すると表現の幅が広がりますね。近頃ちょっと変わったエフェクトだなと思うサイトでSVGが使われてる例をよく見かけます。

レスポンシブデザインとも非常に相性が良いので、適材適所でうまく取り入れていきましょう。

それではまたっ。