SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた
このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で
SVGって未だに使ってるところを見たことが無い
とか
いつになったら使えるようになるのか
永遠に普及しなさそう
みたいな意見をよく見かけます。
そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。
かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。
そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。
例えば
あの有名な会社やこの自治体でも今や使っていますよ
といった具体的な例示があれば、相手側からしても安心感があるでしょうし。
調査対象
冒頭にも書いた通り、採用事例として紹介できるようなリストを作成するのが目的ですから、個人サイトやWebデザイナーのポートフォリオのようなブログはここでは対象外とします。同様の理由でSVGを扱っていて当然なW3CやMDN、Inkscapeなども除外、Wikipediaもそうですね*1。
今回は企業や団体、政治家または自治体などのWebサイトを中心に独自に調査しました。
アメリカで採用事例
アメリカの企業の例として最も有名なのはAppleでしょう。
いわゆるRetinaディスプレイを導入したころから、積極的にSVGを採用しているのが特徴で、様々な部分にSVGを配置しています。Appleのロゴマークや各種アイコンを拡大してもキレイなままにできるのがSVGの特徴ですね。
Googleも、Analyticsではグラフの表示にSVGを使用していますし、
Trendsではグラフに加えて地図の表示にSVGを活用しています。
また他にもGoogle Mapsや、YouTubeなど色々なサービスで使っていますね。
一般の企業・団体
IT関連の企業以外だと、The New York Times、Los Angeles Times、The Wall Street Journalなどの新聞社や、アメコミの出版社Dark Horse Comicsでも使われていますし、テレビ放送局ではCBS、FOXもSVGを利用しています。
（The New York Timesのロゴを拡大したスクリーンショット）
他にも衣料品の分野ではGAP、食品関連だとコーヒーチェーンのStarbucksも。
（スタバのロゴである双尾の人魚セイレーンもSVG）
スポーツ関連
スポーツの分野ではメジャーリーグ全チームのWebサイトでロゴがSVGで作成されているのが大きな点でしょうか。
（The Boston Red Soxの公式サイトより）
自治体や公共・教育機関、政治家
自治体だとコロラド州政府、ペンシルベニア州政府、ユタ州政府のページで使用されていますし、ロサンゼルス市観光局などや、美術館・動物園もヒューストン美術館やジョージア水族館でも積極的に活用されています。
特に意欲的なのが大学の公式サイトで、例えばミシガン州立大学ではpicture要素でSVGを使うなど他のサイトでは見られない先進的なSVGの利用をしています。
政治家では、大統領のオバマ氏、元国務長官のヒラリー氏、上院議員のマケイン氏の公式サイトで使われていました。特にヒラリー氏は大統領選も視野に入れているためか、ロゴのデザインをWebサイトでも大きく印象付けるように配置していますね。当然そこにもSVGが使われています。
その他、下院議員や州知事の公式WebサイトでもSVG採用事例は多数見られます。
アメリカ以外の国々
アメリカ以外の国々でも新聞社や美術館、大学などでSVGは使われていますね。
（ロゴにSVGを使ったイギリスの労働党、バース大学）
新聞社だと英国ではThe Economist、The Guardianに加えて大衆紙The Sunも。他にはフランスのLe Figaro、Le Monde、オーストラリアのThe Australian Financial Reviewなど。
（フランスの日刊発行の新聞 Le Figaro）
（トルコの飲料品メーカーSIRMA）
欧米以外の事例だと、インドの化粧品メーカーMaroma、トルコの飲料品メーカーSIRMAもありますが、特筆したいのはイランのリンク共有サービスBalatarinと、ロシアのポータルサイトYandexです。
（ロシアだとYahoo!やGoogle的なポータルサイトのYandex）
いずれも当地では多くのアクセス数を集める大規模なサイトであるためか、SVGを積極的に使う点もそうなのですが、ラスター画像にはWebPを配置するなどフロントエンドのパフォーマンス向上を図る施策が参考になります。個人的にはイランのWeb事情はそんなに進んでいない……みたいな偏見があったのですが、思っていた以上にしっかりしていて驚きでした。
日本の事例
日本の企業だとトヨタ自動車、SONY、ブリヂストン、サントリーでSVGが使われていましたが、……実はいずれも国内向けのページでは未使用で国際版のWebサイトでのみ使用している、という状況です。
国内向けのページでも使用しているのはコニカミノルタ、江崎グリコがあります。
新聞社では日本経済新聞、日刊スポーツがロゴにSVGを利用していますね。
政党では民主党の公式Webサイトで地図の表示をSVGで行っています。
従来ではこうしたコンテンツはFlashで作成されるケースが多かったわけですが、こうしてSVGで作る事例も増えてくるかもしれませんね。
以上、いくつかの代表的な企業・団体などを取り上げましたが、この調子で紹介するときりが無いので以後は一気に並べていきます。
SVGを活用している企業・団体のサイト
それぞれ国別に並べ、22ヶ国、160件以上をピックアップしました。またSVGの利用形態によって分類し、
- Inline SVG - インラインSVGで利用したケース
- img要素 - img要素で利用したケース
- CSS - 主にCSS background-imageなどで利用したケース
- その他 - それ以外の要素での利用事例、object要素など
などの観点からそれぞれのWebサイトでの利用状況を分析しています。また「スプライト」については、従来のCSSスプライト的な手法か？SVG独特のuse要素を使った手法か？を示しています。
イギリス
イタリア
オランダ
スペイン
ドイツ
フランス
ベルギー
ロシア
トルコ
イラン
オーストラリア
インド
フィリピン
日本続いて、このリストの選定条件の説明です。
ピックアップの条件
今回の条件としては、仮にアイコン一つだけであってもSVGを表示していればOKとします。しかしいくつか除外する状況もあります。
それぞれの除外の条件を解説すると
SVGフォントは除外
例えばデンマークの靴メーカー「ECCO」ではロゴにWebフォントを使っています。
@font-face{ font-family:'ecco'; src:url('/css/Ecco/ecco.eot'); src:url('/css/Ecco/ecco.eot?#iefix') format('embedded-opentype'), url('/css/Ecco/ecco.svg#ecco') format('svg'), url('/css/Ecco/ecco.woff') format('woff'), url('/css/Ecco/ecco.ttf') format('truetype'); font-weight:normal; font-style:normal }
こうして複数のブラウザ向けにSVGを含め様々な種類のWebフォントを用意するのはよくあるのですが、SVGフォントはChromeではサポートされなくなり(Windows XP,Vista用を除く)、現状は余程古いiOS Safari・Opera向けでなければ設定する必要性がありませんし、近い将来使われなくなるのは確実です。
そのためSVGフォントだけではノーカウントとします。
外部ライブラリ・サービスの場合は除外
ルーブル美術館の公式サイトは一見SVGを表示してあるように思ってしまうのですが、
よく調べるとこれは各種Webサービスを表示する外部ライブラリAddToAnyによるものなので、こうしたケースは除外します。
他にはAddThis、Zoover、GoogleMaps・YouTubeの埋め込みでもSVGを利用していますが、同様にノーカウントです。
グラフ表示のみもノーカウント
ブラジルの経済紙「Valor Econômico」ではグラフにSVGを使っています。
これはグラフ作成ライブラリHighchartsによるもので、こうしたライブラリは他にもD3.jsが有名ですね、あとはFusionChartsなども。
このような使い方を今回のテーマに含めるかは悩む部分ではあるのですが、ここでの主眼はグラフ作成ライブラリ採用事例の紹介でないために除外することにしました*2。
ただせっかくなので一応、採用事例をいくつか挙げると、
などで使われています。
WordPressなどのテンプレートそのままの場合は除外
例えばアメリカの下院議員John Kline氏の公式サイト
ではスマートフォンなどの幅が狭い状態でのハンバーガーボタンがSVGです。
そのため今回の条件に合致しているように見えるのですが、
これはルーマニアのIcyPixels社によるWordPressのテンプレート
を使っているだけなので、こうしたケースは除外します。
同様にIcyPixels社のテンプレートは、いずれも下院議員（敬称略）
の公式サイトで採用されていますが、同じく除外。
次はそれぞれ企業・団体のSVGの使い方について詳しく見てみましょう。
SVGの活用の仕方
SVGを利用する用途として最も多いのはロゴやアイコンですね。
SVGをロゴやアイコンに使う
（ブリヂストンの海外版の公式サイト）
企業や団体のロゴにSVGを使うのは最もよく使われる手法です。
パソコン向け、携帯機器向けいずれの環境でも必ず配置する要素ですし、スマートフォンの拡大機能で大きく表示させてもくっきりして見れるのは重要な利点ですね。
アイコンではアメリカのジョージア水族館の使い方が上手く、
こうしてアニメーションの効果も加えられるのもSVGの利点の一つですね。
SVGを地図に使う
先に紹介した民主党もそうですが、
地図にSVGを利用するのもよく見られる活用の仕方です。
（米国上院議員Mark Kirk氏の公式サイト）
（イタリアのミラノ市）
（チェコのスーパーマーケットのチェーン Albert）
地図を表示するライブラリはGoogleMapsなど様々なものがあるのですが、こうしてSVGで作成すると実際の地形よりも分かりやすい形状で見せられるので閲覧者にも使いやすくなります。
SVGをグラフに使う
（The Wall Street Journalではグラフの表示にSVGを使用）
除外する条件でも挙げたのですが、グラフの表示にSVGを使うのも定番の用途です。
その他
Googleで「天候 新潟」などと検索すると気象予報が表示されます。
その際の「風」の矢印でSVGが使われています。この矢印は同じSVGファイルで、風向きによって角度を変えたり、風速の合わせて大きさが変化するなど、拡大縮小に強いベクター形式の特性を活かした利用をしています。
まとめ
やたらと長い記事になりましたが以上、様々な国で調査したSVG利用状況でした。
冒頭で書いた通り、実際の制作現場でSVGを使いたい、という提案をしてもなかなか同意を得られない・クライアントに理解してもらえないケースは少なくないんじゃないかな、と思っています。そうしたときにこの記事で紹介した事例を元に説得の材料になれればいいかなー、と考えています。
蛇足その1
この記事のような調査結果は、誰が調べても同じ内容になりますから著作権法における創作性のある著作物としては扱われないため、自由にプレゼンなどに利用できます。
蛇足その2
ちなみに調査の方法は思いつく限りのWebサイトを片っ端から調べる。
それだけでした。
具体的にはアメリカの全50州、オバマ政権の閣僚、上院議員100人・下院議員432人の公式サイト、国内だと47都道府県、政令指定都市20市、参議院議員242人、衆議院議員475人の公式サイト、プロ野球12球団、J1&J2リーグ 40チームなどを調査しました。こういうリストは先行して誰か他にやっている人がいないかな？と一応調べてみたのですが、見つからなかったので自力でコツコツと。
例えばトルコでの採用事例を探すために、当地のプロサッカーチームの公式Webサイトを全てチェックしたものの、どこも利用していなかったので今度は各チームのスポンサー企業を洗っていったり。
結局、国会議員ではゼロで徒労感はありましたが。
