SVGが楽しすぎて使いまくったらIEで死んだw

2015-02-10   

そんな訳で前にもちょっと書いたけど、ホームペイジの画像に革命が起こりつつあります。

その名も

SVG

エスブイジー(-ω☆)キラリ

なんの略だかは知りません。

長年の勘だとスケイラブルヴェクターグラフィックかな?(※ググったらそうでした)

この技術自体はまーまー昔からあったんですが、ゲイツちゃんところのIE(インターネットエクスプローラー)様がWEB発展の足を引っ張り続けてきたために、普及しませんでした。

特にIE8がもたらしたWEB界への経済損失は3兆5000億ドルにのぼった、なんてのは嘘ですが、ともかくゲイツちゃんとこのIEは本当に邪魔だったんです。

でも、IE8が動くWindowsXPが正式にこの世から葬られた(事になった)ので、WEB界の技術進歩は一気に加速・・・・

って、いいたいところですが、御存知の通り既にパソコンでWEBを見るのは時代遅れになりつつあります。

もっといえば、WEBもヤバイ。みんなスマホでアプリ使ってますよね?FBとかツィッターとかゲームとかラインとか。みんなアプリ。スマホのブラウザでインターネット(のWEBコンテンツ)を見る機会は激減してるはずです。

無敵だったGoogle様もこのままでは・・・

あれ?

いや、そんな話をしたいのでは無かった。

話を戻して。

とはいえ、まだまだWEBサイトの役割は終わった訳ではありません。そんな感じでゲイツちゃんのせいでPC界のWEBがモタモタしてる間、ジョブズちゃんとこのAppleWebkitは過去のシガラミをバッサり捨ててどんどん先へ進んでました。ってな感じの今日このごろなので「もうIEの事は忘れて新しい事にチャレンジしても文句は言われまい」。と、WEB界のみんなが思っている訳ではないけど、オレ個人ではそう思います。

なので、積極的にSVGを取り入れてみました。

そしたら・・・・

めちゃ面白い(-ω☆)

HTMLタグでtableレイアウトしたりfont-color="#ff0000"とかで色付けた時代からCSSに変わった時くらいの衝撃。イノベーション!

SVGがどーゆー効果をもたらすかというと、以下2つのバナー画像を見比べてもらえば一目瞭然。

例1 (a)従来の画像によるバナー

H8nJMtYV9RzUzLLX.jpg

(b)SVGのバナー

1b1jWlCmo4E336hz.jpg

 

 

例2 ↓上の赤い部分がSVG,下が従来の画像

6vhfcQ1bHzsZRaa0.jpg

 

 

例3:下図のような極小アイコンも

Fy7wUndMqHqKnDuG.jpg

ここまで拡大しても画像劣化皆無(-ω☆)キラリ

CbKMxyJlnZX8_v8f.jpg

 

 

っていうのがSVGによる画像です。すごくないっすか?

これらの画像は解説のためにPCのブラウザで無理やり拡大表示したものです。普段の拡大率ってか、普段サイズの表示ではここまで画像の荒れは目立ちません。

でも、iPhoneとかマックの高解像度ディスプレイで見ると明らかにその違いが解るんです。興味のある方は某トーナメントサイト開いて画像をピンチアウトで拡大してみてください。全部の画像がそうじゃないけど、半数近くがSVG採用してます。

もともとiPhoneは高解像度なので、300幅の画像でも実は600~幅で作るほうがキレイに見えるんです。けど、それだとファイルサイズが大きくなっちゃう。けど、このSVGはどんなに拡大してもファイルサイズは一緒であげく画像がキレイ。素晴らしい!写真とかは駄目ですが線画ならOK。

そんなSVGに感動し、あちこちの画像をSVG化。ま、自己満足の一面もあるんですけどねw

で、帰宅して、めったに起動しないIEでなんの気なしに見てみたら・・・・

ゲッ 表示がめちゃズレてる((((;゚Д゚))))

IEも10以降はまーまーまともになったんですけどねぇ。

まさか2015年にもなってゲイツちゃんの罠にハマるとは(´・ω・`)

とりあえず応急処置したけど、休み明けは本格的に直さないと・・・

というわけでIEを使ってるみなさん、あれは百害あって一理ないんでクロームかFireFox使ってください(切実)

カテゴリ:PC・スマホ・WEBネタ

UNITORO以外の最近の投稿

twitter

Recent entries

Category

Popular entries 2016

Popular entries 2015