いろんなWEBサービスなどのSVGアイコンをダウンロードできる「Simple Icons」
WEBサーバーの負荷軽減や CDN 利用料を節約するために、WEB サイトに含まれる画像周りのリクエスト数やファイルサイズを削減することは珍しくありません。
具体的には、CSSスプライトやアイコンフォントの利用、はたまた、画像バイナリをBase64エンコードしてHTMLに埋め込んだりと、様々な工夫を凝らすわけですが、その他にも、SVG によるベクターグラフィックを導入する。という方法も存在します。
というわけで今回は、様々な WEB サービスや会社のロゴマークを SVG 形式でダウンロードできるサイト「Simple Icons」を紹介しておきます。
サイトはこちらから。
左側のボックスからサービス名を入力するとロゴマークを検索できます。また「Download」ボタンからダウンロードもできます。
用意されているロゴマークは、「Facebook」「Twitter」「Google+（新ロゴ）」といったメジャーどころからマイナーなものまで、かなりの数。
データ形式は SVG の PATHです。SVG の fill コマンドを使えば好きな色に変更することも可能。fill を使う前提なら、実質的には2値データとして使えるモノがほとんど。
LINE や Feedly など、国内でよく使われているサービスのアイコンもあるのが嬉しいところ。
SVG は、一見、同じに見えるグラフィックスでも、記述次第でデータ量が大きく変わるデータ形式ですが、「Simple Icons」のベクタデータはコードゴルフがわりかし上手とまでは言いませんが、他に比べてデータ量はそれなりに少なめなので、そういう意味でも便利です。
古い IE など、クラシックブラウザのサポート切れが相次ぎ、レスポンシブウェブデザインが一般的となる中、解像度に依存しない SVG はまさにマルチデバイス向けと言えますし、また、モバイルの普及とサイト高速化の観点からも、再び、HTML埋め込みの SVG の価値は評価されそうな予感もします。
昨年の Google の新ロゴなんかを見ていてもそうですが、今後はデザイナー側にも、ロゴやアイコンのデザイン時点でどれだけ短い SVG で記述できるのか、というセンスも当たり前に要求されるようになってきそうですね。