台風がすごい角度で東に曲がっていきましたね。
日曜日のライブは無事に行けそうでよかった。
あ、なしろです。
みなさんベクター画像は好きですか？
そう、例のベクター画像です。
あのベクター画像です。
(ベクトル画像と呼んだりもします)
Illustratorで描いたりする画像ですね。
ペジェ曲線とか楽しいです。
ベクター画像はJPEGやPNGなど(ラスター画像と呼びます)と違い、線などが座標として記録されています。
なので拡大してもきれいな画像です。
今回はそんなベクター画像をWebで扱う話です。
Webでベクター画像というとSVGがあります。
SVGは昔からあり一部では使われていましたが、JPEGなどのラスター画像と比べて作成が難しく扱いづらいためあまり普及しませんでした。
最近のモニターの高解像度化(特にiPadやiPhoneのRetinaディスプレイ)によりWebでの画像の高解像度対応が必要になってきています。
ラスター画像で単純に大きくするとファイルサイズが大きくなり、Webではあまり使えません。
そこで再注目を浴びたのがベクター画像です。
ベクター画像なら拡大してもきれいなので、ファイルサイズも変わりません。
(ただし複雑な画像では座標情報が多くなるためファイルサイズが大きくなります)
HTML5ではSVGタグが登場し、HTMLの中にそのままSVGを書くことができます。
(ここからプログラマ寄りのお話ｗ)
そしてつい昨日のこと、AdobeがJavaScriptでSVGを扱うSnap.svgというライブラリを公開したと発表しました。
JavaScriptから動的にSVGを簡単に書くことができ、アニメーションもできます。
JavaScriptでSVGというと超有名なRaphaëlというライブラリがありますが、Snap.svgはこのRaphaëlの作者(Adobeの人)が一から作り直したライブラリです。
早速ちょっと触ってみました。
Raphaëlと比べるとマスクやグラデーションなどの表現に強いかなと感じました。
あと、これが一番大きいのですが、外部のSVGファイル(Illustratorなどで出力したファイル)も読み込んで同じように扱えます。
Raphaëlでは読み込んだSVGはただの画像(ラスター画像)のようにしか扱えませんでした。
それをアニメーションさせたり色を変えたりなど、動的に書いたSVGと同じように扱えるのです。
やはりJavaScriptで一から書こうとすると大変ですが、あらかじめ書いておいたSVGを読み込んで使えるとずっと楽ですね。
そんな訳で、みなさんベクター画像は好きですか？
拡大してもきれいな画像は好きですか？
Snap.svgでSVGを動かしましょう！
あ、公式サイトのURL貼っときます→こちら
Demosが楽しいです。
あとGetting Startedが分かりやすくていいです。
以上、ステマでした←違ｗ
ではまた。