SVG画像のアップロードに対応しました

まめわざのシステムのあらゆる箇所でSVG画像が利用できるようになりました。
スマホやApple製品を中心に、昨今増えてきている高精細ディスプレイで綺麗に表示させることが可能です。
SVG画像の説明とともに解説します。

SVGとは

SVGはScalable Vector Graphicsの略で、Scalableとあるように、拡大をしても画像がギザギザにならないのが特徴です。
スマホやデジカメで撮影した写真など、ほとんどの画像がビットマップというドット形式であるのに対し、線や図形の組合せ表現するベクター形式が使われます。
ベクター形式であることが、画像を拡大しても高精細に表示できる理由です。

SVG向きの画像

ベクター形式は線や図形で表現されるため、写真に利用されるビットマップに対し、CG(イラスト・マンガ)に親和性が良いと言えます。
仮に写真をベクター形式で表現すると、写実性が損なわれ、膨大な容量になって実用には不向きです。
ホームページ上では、写真を含まず図形が比較的単純なロゴ・バナー・ボタンなどに利用すると最適です。

SVG画像の利用例

このページの左上に位置するまめわざのロゴをSVG画像に変更しました。
ビットマップ画像のロゴとSVGのロゴを、iPhone6でキャプチャした比較画像を用意しました。
ご覧のように一目瞭然でSVGが綺麗です。輪郭がハッキリと見えるので印象も良いでしょう。
iPhone6は326ppiという解像度で高精細な部類ですが、昨今販売されているこれ以上の解像度をもつ端末では、その差は更に顕著になります。

SVG画像の明るい未来

4Kという高精細なTVを売り出しているように、パソコンやスマホなどデジタル製品のディスプレイは高精細化が進んでいます(ディスプレイの低価格化や、CPUなど他の部位の改善ペースが鈍化の影響でしょうか?)。
ディスプレイの横方向のドット数は、過去には1,024pxや1,366pxが主流であり、現在は1,920pxとなっています。今後は、その倍(4K)の3,840pxなどになる可能性もあるでしょう。
ドット数が増えると、ビットマップ画像はギザギザ感が目立ってきますが、一方で、ベクター形式であるSVG画像は影響を受けません。
SVG画像は、将来に渡って利用できる潜在能力を秘めています。

SVG画像を使う

まめわざ内では、SVG画像は写真などのビットマップ形式と相違なく扱われます。
「画像をアップロード」からSVG画像を選択することで、画像ブロックや装飾の背景に設定できます。

SVG画像を作る・手に入れる

スマホの普及で写真撮影が身近な行為となり、ビットマップ形式の画像は無意識でも日々目にしています。
その一方で、ベクター形式の画像は専門的で敷居が高く、馴染みの薄い存在です。
イラストレータなど画像編集ソフトが使えなければ、SVG画像を自作するのは難しいです。

ロゴ作成をデザイン会社に依頼をしている場合は、SVG形式で納品をしてもらえる可能性があります。
容量が大きすぎなければ(50KB程度)、ホームページのロゴとして利用する選択肢も考えられます。

SVG画像の軽量化

以下のサービスでは、SVG形式の画像を、見た目をそのままに容量ダウン(軽量化)できます。
https://jakearchibald.github.io/svgomg/

  • Open SVG」から元の画像をアップロード
  • 「↓」のアイコンから圧縮された画像をダウンロード

という極めてシンプルな操作ですが、概ね3~5割ほど圧縮できるとても優れたサービスです。
SVG画像をホームページ上で利用する際は、こちらで軽量化してから利用することをおすすめします。

SVG画像に未対応のブラウザシェア

SVGに未対応の主なブラウザと2016年8月時点のブラウザシェアをまとめると以下のようになります。

SVG未対応の主なブラウザブラウザシェア
IE8以前0.44%
Android2.3以前の標準ブラウザ0.08%
0.52%

このシェアは、弊社が管理しているホームページの実測値です。約1年前の値ですので、更に減少していると思われます。
国際的な統計を元に計算すると、SVG未対応ブラウザのシェアはもっと高くなると思われます。
それは、新興国で古いバージョンのスマートフォンが使われている割合が高く、人口が多いことから統計に少なからぬ影響があるからです。
しかし、日本の現状では、ご覧のような低シェアであると思われます。

いずれもメーカーのサポートが切れているブラウザであり、今後も継続的な減少が見込まれます。
まめわざは日本向けのサービスでもあるため、「SVG未対応ブラウザは無視できるほどに少ない」と判断しています。

2017/7/10