透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。
手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。
やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するように作ったアイコンの SVG ファイルを用意して、そいつの背景色を CSS で指定してあげればっていうだけ。
この Blog では img 要素を使用して SVG ファイルを指定していますが、background-image プロパティでやっても構わないし、その辺はお好みで。
SVG 内で JavaScript を使用していない場合 （単なるアイコンなら普通は使わないと思うけど） は img 要素を使用すれば問題ないし、使ってるなら iframe、object、embed 要素のいずれかを使用すればいいと思います。
実際の SVG ファイルとか、アイコンボタンのバリエーションとかは下記のデモをご確認ください。使用しているアイコンの SVG ファイルは、各 Web サービスのアイコン使用規程の絡みがありますので当 Blog では配布はしません。
SVG によるアイコンファイルの作り方
今回のサンプルように主要な Web サービスのアイコンを使用する場合ですが、Twitter や Facebook などでは EPS 形式、もしくは PSD 形式のロゴデータが公式に提供されていますのでそれを基に SVG を作るのが簡単です。
例えば主要な Web サービスのブランドロゴ配布ページは下記にあります。必ずロゴ使用規程を確認した上で使いましょうね。
- Brand assets and guidelines ： Twitter （日本語）
- Using Facebook Brand Assets ： Facebook
- Branding guidelines ： Google+ Platform
- Using Instagram Brand Assets ： Instagram （ロゴデータは Instagram Press Center の 「Brand Assets」 セクションにあります）
- Logo ： Tumblr
RSS アイコンなら下記のサイトとか （Developer Kit の中に各フォーマットでのデータが入っています）
あと、今回のサンプルだと feedly のロゴだけが公式に提供されていませんでしたので、これは自分で Illustrator を使って作り、SVG で書き出しています。
この手法で考えられる問題点や注意点
最後に SVG を使用した今回の手法で考えられる問題点などを簡単に。
ブラウザ対応
この話題で問題になるのは IE ですが、IE8 以前は SVG に対応していません。よって IE9 以降では正しく表示されますが、IE8 以前では背景色のみでアイコンが出ない状態になります。下記のような点に配慮しておけば特に問題ないと思いますが。
- SVG が表示されないと重要な操作ができなくなるような箇所では使わない
- 適切な代替テキストなどを提供する
- 必要に応じてフォールバックを提供する （例えば古い IE だけには背景画像で代替となる画像を提供しておくなど）
あと、スマートフォンですが、Android OS に関しては SVG 対応したのは Android 3.0 以降ですね。なので、Android 2.3.x 以下の環境では使えないです。iOS に関してもまともに SVG 対応したのは Safari 5 系からだと思いますが、シェアやリリース日などを考えればもう無視していいんじゃね？ と思います。
スタイルシートが無効な環境で真っ白問題
これは SVG でやった場合だけじゃなくて通常の画像ファイルを使っても同じ問題が考えられるんですが、アイコン部分が白色になっている関係上、CSS で指定した背景色が反映されないと、見た目単なる白ベタになっちゃうっていう話。
これに関してはもう使いどころを考えるしかないですね。確率は低いですが、重要な操作がこれによってできなくなる、難しくなるという事態だけは避けられるようにしておくのが賢明です。
SVG のファイルサイズには注意
今回のような比較的単純なロゴでは問題ないですが、パスが複雑なイラストなどになると SVG ファイルのサイズが肥大化する場合がありますので注意が必要です。
Illustrator のようなソフトウェアから書き出す場合は事前にパスの最適化をしたり、書き出し設定を確認したり、SVG ファイルを直接編集して、無駄なソースコードは削除するなどしてもよいでしょう。
