Hatena::ブログ(Diary)

聴く耳を持たない(片方しか)

2014-10-07 SVG未対応ブラウザのシェアって今どれくらいか?2014年10月版

先日発売されたiPhone 6 Plusでは従来よりもさらに画面が大きくなったり、Retina iMacの噂があったり、様々な機器でディスプレイの高解像度化が進んでいます。

それらの環境に合わせてピクセルサイズを変えていくつも画像を作るより、いっそSVGのようなベクター形式に移行したい!……でも古い環境が残っててまだまだ使えないんでしょ?

と考えている人も多いのではないでしょうか。


じゃあ実際どれくらいの環境が残っているのだろう?というのを調べてみました。


Twitterや検索から来た人はどうせ最後まで読まないと思うので結論を先に書くと

簡略な結論

2014年10月現在、SVG未対応のInternet Explorer8以下は依然として大きな割合を占めてるものの、iOS・AndroidではそろそろSVGが使える環境が整ってきましたよ

という感じです。

PC向けはSVG未対応の環境は26.91%


Androidで未対応の環境は現在12%ですが着実に減少傾向なので。


(簡略な結論ここまで)




以降、グラフのデータ元や詳しい説明などをしてゆきます。


調査の元になったサービス

今回はブラウザやOSのシェアの調査結果を公表しているこれらを利用しました。

ただブラウザのシェアの調査は難しく、またサイトによっても傾向は大きく異なるでしょう。例えば Yahoo! Japan利用者とGoogle利用者でも傾向は違うと思います。そのため、あくまで目安として捉えて下さい。


SVG対応の基準

SVGの機能は多岐にわたりどれを基準にするかは悩むところですが、ここではHTML5でのインラインSVGを表示できるか否かを判定の基準にします。

どのブラウザが対応しているかは Can I useのページでまとまっていますね。

Inline SVG in HTML5 - Can I use...


SVG未対応の環境とは

主要なモダンブラウザでは概ねSVGへの対応はされていますが、現在まで残っているSVG未対応の代表的な環境をピックアップすると、この4つが挙げられます。

IE8以下Android 2.3.x以下Opera miniフィーチャーフォン
Internet Explorer8以下

古くはInternet Explorer向けにAdobe SVG viewerプラグインもありましたが、標準でSVGに対応したのは9からでした。シェアが最も大きくおそらく今後も長く残るのはこの環境でしょう。なお将来的にはこのような明るい話題もあります

しかし実際はそれ以降も少なくない割合で残るのではないでしょうか。残念ながら。


Android 2.3.x以下

AndroidでSVGが対応されたのは3.0以降でした。それ以前の2.3.x以下は利用者も多かったのでかなりのシェアを占めていたものの、その割合は徐々に減ってきています。


Opera mini

日本や北米、ヨーロッパでは利用者が少ないのですが、日本を除くアジア圏、アフリカ圏の一部ではOpera mini利用者の割合が高いです。

例えば顕著なのがインドネシアですね。

国内ではあまり関係ないでしょうが、海外進出を検討する際には念頭においておくといいかもしれません。


フィーチャーフォン

いわゆるガラパゴスケータイ、スマートフォンではない携帯電話ですね。

ただSVGに限らずJavaScriptや画像サイズなど他の環境と異なる対応が必要な面が大きいので、対処法としてはSVGだけフォールバックというより、従来通りケータイ向けのページを用意する施策になるでしょうか。


フォールバックについて

ちなみに、こうしたSVG未対応の環境へのフォールバックについてはこちらの記事がまとまっています。

SVGをIE等のブラウザ対応を考慮して使う方法まとめ(SVGのフォールバック画像など)|2.IDEA


そんなわけで、以下調査結果

パソコン環境でのブラウザシェア

StatCounterの場合

StatCounterは国別・地域別のシェアの情報や、期間を区切っての範囲指定などが自由に行えてとても便利なサービスです。前述のCan I use...でもシェアの情報はStatCounterのデータを利用して算出しています。

現時点でダウンロードできる最新情報は2014年9月までの統計なので、日本でのシェア情報を取得し円グラフ化してみました。

「その他」はSVGに対応してるがシェアが少なくて描き切れないもの、「不明」は未対応のものとsafari 1.0のような古いブラウザ、あとは中華圏のブラウザで対応状況が判然としないものを含めました。

StatCounterではSVG未対応が6.94%、対応した環境は93.06%となりました。


NetMarketShare - Net Applicationsの場合

同じようにブラウザシェアの情報を公開しているNetMarketShare - Net Applicationsでもデータをダウンロードして円グラフ化してみましょう。

調査期間は同じく現時点で最新の2014年9月まで。ただ地域別の統計情報は有料なので全世界版となります。

こちらではSVG未対応が26.91%、対応した環境は73.09%という結果に。


以下両者の内容を並べて比較してみました。

StatCounterNetMarketShare - Net Applications
Browser Versionシェア小計Browser Versionシェア小計
SVG未対応IE 8.03.84%6.94%IE 8.022.25%26.91%
Safari 5.00.58%IE 6.03.23%
Safari 4.10.19%IE 7.00.68%
IE 7.00.17%Safari 5.00.34%
IE 6.00.11%Firefox 3.60.23%
不明2.05%不明0.18%
SVGに対応IE 11.030.52%93.06%IE 11.017.13%73.09%
Chrome 37.024.23%Chrome 37.010.06%
Firefox 32.07.78%IE 9.09.34%
Chrome 36.04.95%Firefox 325.94%
Firefox 31.04.91%IE 10.05.58%
IE 9.04.23%Firefox 313.92%
IE 10.03.80%Chrome 36.03.06%
Safari 7.03.15%Safari 7.02.27%
Safari 5.11.63%Chrome 35.01.64%
Safari 6.11.18%Chrome 32.00.85%
Chrome 35.00.55%Chrome 31.00.80%
Opera 12.10.49%Opera 12.x0.76%
Opera 24.00.46%Safari 5.10.64%
その他6.52%その他11.10%

こうした違いは何故出るか?というとStatCounterはページビューを基に、NetMarketShare - Net Applicationsではユニークビジター数を基に算出をしているためこのような結果になるわけです。どちらが正しいかといった問題ではありませんが、大目に見積もっておいた方がいいでしょう。

またInternet Explorerのバージョン別の割合を見ると、未だに8以下の利用者は多いことが分かります。現状としてはそれらの環境への対応は必要でしょう。


スマートフォン・タブレットでのシェア

iOSの場合

iOSのシェアは開発者向けにこちらで情報を公開していますが

no title

iOSではSVG対応は比較的早かったため、現在のiOSのシェア状況を鑑みると特に問題なく使えるでしょう。


Androidの場合

Androidはこちらでバージョンごとのシェアを公開しています。

Dashboards | Android Developers

この情報を元に、ここ一年半ほどの推移をグラフにしてみました。

DonutÉclairFroyoGingerbreadHCICSJelly BeanKitKat
1.62.12.22.3 -
2.3.2
2.3.3 -
2.3.7
3.x4.0.3 -
4.0.4
4.1.x4.2.x4.34.4
2013年03月0.1%1.7%4%0.1%39.7%0.2%29.3%23%2%
2013年04月0.1%1.7%3.7%0.1%38.4%0.1%27.5%26.1%2.3%
2013年05月0.1%1.5%3.2%0.1%36.4%0.1%25.6%29%4%
2013年06月0.1%1.4%3.1%0.1%34.1%0.1%23.3%32.3%5.6%
2013年07月0.1%1.2%2.5%0.1%33%0.1%22.5%34%6.5%
2013年08月2.4%30.7%0.1%21.7%36.6%8.5%
2013年09月2.2%28.5%0.1%20.6%36.5%10.6%1.5%
2013年10月1.7%26.3%0.1%19.8%37.3%12.5%2.3%
2013年11月1.6%24.1%0.1%18.6%37.4%12.9%4.2%1.1%
2013年12月
2014年01月1.3%21.2%0.1%16.9%35.9%15.4%7.8%1.4%
2014年02月1.3%20%0.1%16.1%35.5%16.3%8.9%1.8%
2014年03月1.2%19%0.1%15.2%35.3%17.1%9.6%2.5%
2014年04月1.1%17.8%0.1%14.3%34.4%18.1%8.9%5.3%
2014年05月1%16.2%0.1%13.4%33.5%18.8%8.5%8.5%
2014年06月0.8%14.9%12.3%29%19.1%10.3%13.6%
2014年07月0.7%13.5%11.4%27.8%19.7%9%17.9%
2014年08月0.7%13.6%10.6%26.5%19.8%7.9%20.9%
2014年09月0.7%11.4%9.6%25.1%20.7%8%24.5%

SVG未対応のAndroid2.3.x以下は合計12%ほど。ただこれは地域別ではなく全世界での統計なので、国内の場合ではシェアは異なるでしょうし、12%は少なくない割合ではあります。

ただ先日こうしたニュースもありました。

「パズドラ」,2014年12月に対応OSをiOS 6以降/Android 4.0以降に引き上げ予定 - 4Gamer.net

スマートフォン向けの人気ゲーム「パズル&ドラゴンズ」が12月頃から対応OSをAndroid4.0以降にするとのこと。推移のグラフを見ると分かる通り、Android3.0以下は順調に減ってきていますから、そろそろ切り捨ててもいい時期なんじゃないかなー、とは感じています。


まとめ

Internet Explorer8以下の割合は日本だともう少し多いような気もしますが、懸念の一つだったAndroidについてはそろそろ使える環境が整ってきた、と言えるでしょう。

ただ今回はHTML5のインラインSVGが表示できる = SVG対応としました、しかし実は Can I use... でSVGのページを見ると分かるのですが、SVGの全ての機能をサポートしたブラウザは未だにありません

SMILアニメーション、SVG fonts、HTMLの要素へのSVGフィルタ、SVGのfavicon指定などなど、SVGの機能は非常に多岐にわたることもあり、また他の似たような仕様との兼ね合いもあって今後もSVGの全ての機能をサポートしたブラウザというのはきっと出てこないんじゃないかなー、と私は考えています。それにSVG対応がされたとは言っても、ブラウザの差があったり、まだまだ不具合があったりなんですが……。

とは言え、基礎的な部分での実装はかなり進んでいますから、十分実用化できるようになってきたのではないでしょうか。


参考リンク

以前に書いたSVG関連エントリー

SVGの学習に役立つサイトや書籍の紹介
SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました! 114個


高木 洋一高木 洋一 2015/06/07 02:16 始めてコメントさせていただきます。
私も少々、身体にハンデがあり再就職の為に50歳を過ぎてから、独学でwebプログラミングを学んでいる者です。
基礎学習程度では年のせいか、不採用街道を驀進中なので、最近ではSVGを扱ったjavascripのコードなどを組んでいます。
SVGに関するサイトは少ないので、此方のサイトには本当に助けられています。
今回、求人応募用に製作したものが自分では気に入っているのですが応募先からは梨の礫です。
それで、勝手なお願いですが先達であるrikuoさんに感想などを頂ければ、今後の励みになるとコメントいたしました。
アップしたURLは
http://height41.php.xdomain.jp/svga1/
ですので、見て頂いて率直な感想などを頂けると幸いです。
身勝手なコメント失礼いたしました。

rikuorikuo 2015/06/07 06:33 > 高木さん、初めまして

私自身はJavaScriptの技術も低く、アドバイスができるほどの者ではありませんが、サイトの方を拝見させていただきました。イラストが描かれていくアニメーションですね。
内容そのものはユニークなのですが、IE11、iOS8.3 Safariでアクセスしたところ表示されませんでした。Webの制作において厄介なのはブラウザ間の違いや検証で、そこが習得の難しいところですね。

またアニメーションの演出は一見 華やかに見えるのですが、特にSVGを使った事例では様々な画面サイズの機器、例えばパソコンとスマートフォン、タブレットそのいずれで閲覧してもきちんと表示されることの方が現在は重要視されているように感じます。
さらに言えばSVGに未対応な環境であれば、適切に代替する画像を表示するフォールバックを構築できる技能ですね。


これとは別の記事で色々な企業や団体でのSVG活用事例を調査したのですが
http://d.hatena.ne.jp/rikuo/20150524

SVGでアニメーションを使った演出は、江崎グリコやジョージア水族館程度で他にはほとんど見られません。
それよりも、ヒラリー氏やニューヨークタイムズのサイトのように、SVG未対応であっても適切に代替画像を表示したり、デューク大学のように音声ブラウザ(スクリーンリーダー)向けにWAI-ARIAを設定したり……といった地味ではあるものの堅実にアクセシビリティやユーザービリティを考慮して構築できる技術の方がSVGの分野では必要とされているのではないかなー、と考えています。


SVGは未だ普及段階で、そもそも使うのがまだ珍しいという過渡期ですから、SVGを使ったアニメーションが求められるのはもう少し先、数年後のような予想を私はしています。もちろん今から準備するのは正しいですが、WebGLの方面も手を出しておくと良いのかもしれません。

高木 洋一高木 洋一 2015/06/07 21:49 早々のアドバイスありがとうございます。
SVG活用事例は以前に読ませていただきました。
凄い情報量ですね。
デモがIE非対応である事はコメントに載せ忘れました。すいません。
その後、IEへの対応は色々と試して、外部SVGファイルをstroke-dashoffsetで表示させられる所までは出来たのですが、イラストを動かしているanimateMotion要素にインラインですら対応して無い事が分かり、これ以上手を入れる事はあきらめました。
実用面よりは、向学の為に自分の発想を如何に形にするを試したものなので良しとしてます。
今はIEも念頭に入れて、pathのd属性を操作して単純な動きをするコードに取り組み始めました。
折角覚えたSGVですので(操作するのにinkscapeの使い方から始めました)、うまく付き合っていこうと思います。
アドバイス頂いたWebGLは、コメントの前に紹介サイトを見てみましたが、3Dは今の自分には荷が重いですね。
しかし、コメントするのにフルネームはかっこ悪いですね。失敗しました。

rikuorikuo 2015/06/08 06:17 IEの対応は厄介ですね、それだけにその点をカバーするライブラリもあり、

snap.svg
http://snapsvg.io/
http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml

two.js
http://jonobr1.github.io/two.js/

などがあります。つまりそれだけ複数の環境をサポートする必要性や需要は高いです。また今はIEではSVGのアニメーションがサポートされていませんが、現在策定中の仕様 Web Animations 1.0 http://www.w3.org/TR/web-animations/
が勧告されれば将来的にはIEでも様々な機能が使えるようになる……かもしれません。

スマートフォンの割合が高まってきたとは言え、依然としてIEのシェアは高いですから、そうした環境に対応できる能力は重要視されるのではないでしょうか。

トラックバック - http://d.hatena.ne.jp/rikuo/20141007