2014.10.11 (Sat)

SVGを導入したのでSVGとは何か簡単に説明してみる

SVGを導入したのでSVGとは何か簡単に説明してみる

更新サボってたらいつのまにか10月で焦ってます。
これといった商品レビューネタもないので、たまにはWEBの話でもします。

このサイト、これまでSNSボタンをWordPressのプラグインで設置していたのですが、なんでもかんでもプラグインに頼りすぎるのもよくないので少し前にプラグインを外し自分で設置してみました。
ちょっとシャレオツな感じのボタンになったのではないでしょうか?(まだ見てない人は下にスクロールして見てみてね)

それで良い機会なので、今回このSNSのロゴ画像にSVGという形式の画像を実験的に導入してみたのですが、これがなかなか良い感じ。
とは言えWEBの知識がない人はSVGって何?と思う人が大半だと思いますので、今回はこのSVGとは何なのかについて簡単に書いていきたいと思います。

SVGって何?

まず通常WEBで使っている画像と言えば「GIF」「JPEG」「PNG」の3種類の形式のどれかです。
これらの形式の画像は、ビットマップ画像と呼ばれるもので、1つ1つのピクセルの集まりで描画されている画像となっています。

ビットマップ象さん

このようにズームしてみれば、それがよくわかりますね。

それに対して、この「SVG」はベクター形式と呼ばれるもので、点の座標とそれを結ぶ線・色などを数値化して描画されています。
うまく説明できませんが簡単に言えば全てがプログラムで出来ている画像という感じでしょうか?

ベクター象さん

ベクター形式は、ビットマップ形式と違い、このようにどんなに拡大しても滑らかで綺麗ななままであることが特徴です。

Web制作で主に使われるグラフィックソフトはAdobeのPhotoshopとIllustratorが有名ですが、主にビットマップ形式を扱っているのがPhotoshopで、ベクター形式を扱っているのがIllustratorという違いがあります。

SVGで何ができるのか

ベクター形式でロゴ制作

ベクター形式のIllustratorは図形を書くのに適しているため、主にロゴマークなどはイラレで制作されることが多いと思います。
しかしそのロゴ画像をWEBサイトに乗せるには、WEB用にPNGやGIFのビットマップ形式にして書き出す必要があるというのが当たり前でした。

しかし、近年普及してきている(?)このSVG形式ならばベクターデータのままのイラストをWEBで表示することが可能なのです。
先述したようにベクターデータはどんなに拡大しても綺麗だというメリットがあるので、これが使えるとさらに美しいWEB表現が可能となるのです。

高解像度のマルチデバイス時代

様々な解像度の端末に対応しなければならない

しかしいくら拡大しても綺麗だとは言え、通常のサイズで見る分にはビットマップ形式の画像でも大差はありません。
では、なぜわざわざSVGを使うの?と疑問に思われる方もいるかもしれませんね。

現在、巷には様々な種類のデバイスが溢れており、それぞれの端末で画面サイズや解像度が違います。
代表的なのがiPhoneなどにも使われているAppleのRetinaディスプレイ。
解像度が高く画面がとても美しいのですが、Retinaディスプレイの端末をお持ち方はわかると思いますが、WEB閲覧をしていると中には逆に画像が荒く見えてしまうものもあるのです。

それはディスプレイの解像度が高過ぎるが故の弊害です。

Retinaディスプレイは通常の倍もの解像度があるため、見たい画像が300×300ピクセルのサイズのものであるとしたら、600×600ピクセルのサイズの元画像が用意されていなくては綺麗に見ることができないのです。
4Kテレビとかもそうですが、デバイスの解像度だけが上がってもそれにコンテンツが追従しなくては本領を発揮することができないんですよね。

Retina対応をするには2倍の大きさを用意する必要があるので、制作側としたらその分余計に手間がかかります。
さらには、iPhone6からのRetina HDはさらに高解像度になったので今度は3倍の大きさを用意しないといけないとかなんとからしいです…

新しいデバイスが出るたびに全ての画像を2倍3倍の大きさで作りなおす、ということになるとめちゃくちゃ面倒臭いですよね。
その点このSVGならば、どんな解像度の端末で見ても同じように美しく描画してくれるので、いちいち画像を修正する手間がかかりません。
まさにこのマルチデバイス高解像度の時代のWEBにピッタリな画像形式と言えますよね。

理由はそれだけではないのですが、主にそんなようなことからSVGは近年とても注目されているのです。

実は昔からあったSVG

IEはWEB制作者にとって憎き存在

まぁでも実はこのSVG、最新技術のように感じますが13年も昔の2001年には既に存在していたものなのです。
しかし可哀想なことに、今も昔も圧倒的なシェアを誇るブラウザ「Internet Explorer」(IE)が長年SVGに対応してこなかったせいでなかなか日の目を見ることがなかったんですね。まぁ昔は今ほど高解像度の端末もなかったので時代を先取りしすぎてた感はありますが…。

しかしそんなIEもIE9以降はSVGに対応し、最近ではIE8以下のブラウザのシェアも順調に下がってきていることから、SVGを利用したサイトはどんどん増えてきているようです。
そんな中、乗るしかないこのビッグウェーブに、ということで今回僕もSVGを導入してみたというわけです。世界的ですもんね。

まとめ

まぁ今回の記事で何が一番言いたかったかというと、IE8以下を使っている人はさっさとアップデートしてくれということです。
IEへの対応はWEB制作者の避けて通れぬ道ですが、WEBを勉強している身としては、SVGを始めとする素晴らしい最新のWEB技術が使用機会に恵まれていない現状に憤りを感じるというか、もったいないなぁと思わざるを得ないのですよ…。

いつまでも居座り続けて、若手の活躍の機会を奪っている…オールドブラウザはまさしく老害以外の何者でもありませんね。

僕は基本的に新しいもの好きなのので、古いOS・古いブラウザを使い続ける人の気持ちがわかりませんわ。Chromeめっちゃ快適なのになぁ…

まぁそんな感じです。では、また。

[スポンサードリンク]

[スポンサードリンク]

Author:トム
Author :
トム

このブログでは便利な生活グッズや家電、iPhoneアプリなどを中心に、僕のおすすめアイテムを紹介していきます。良いところはもちろん、イマイチな点も含めてレビューしていこうと思うので、購入前の判断材料なんかになれば幸いです。

Tag Cloud

Categories

Archives

Recent Posts

Popular Posts