SVG

田胡研で最も低スペックだと自覚している　B13　若林　遼です。

正直、自分から皆様に技術的なことを言えることがほとんどないです・・・

なので今回は自分が少しかじっているSVGについて簡単に紹介していきたいと思います。

まずSVGとは・・・？

SVG（Scalable　Vector　Graphics<スケーラブル・ベクター・グラフィックス>）の略称。・・・らしい。
ベクター方式で2次元グラフィックスを表現するためのXMLベースの言語。


　SVGは、JPEGやPNGなどと異なり、点（ビットマップなど）で画像を表現するのではなく、直線や曲線（ベクター）で画像をWeb上で表現する技術です。
　SVGは、パスの情報だけで描画しているらしく、どれだけ拡大とかしても画質が崩れないそうです。印刷品質を問われる場合などに適しているみたいです。
　HTML５で登場したCanvasに比べて広範囲の描画に適していて、ボタンなどのインターフェース簿品が作りやすいという利点があります。

　

・・・では、簡単に表示したいと思います。
まず、赤い丸の画像を描画し、ボタンを押すと赤い丸が横に移動する簡単なプログラムを作りたいと思います。

HTMLはこんな感じです。↓

JavaScriptはこんな感じです。↓

　以上のプログラムを実行する↓のように表示されるはずです。
　画像なので止まっていますが、ボタンを押すとちゃんと動いてくれます。

　SVGは専用のｊQueryのライブラリ（？）みたいなのがあるのでそれを使うともっと楽に描画やアニメーション機能を使えるようになります。
　詳しく知りたい人は、↓のURLからDLできるので落としてみてください。(英語ですがリファレンスにもなっているので参考になります。)

lhttp://keith-wood.name/svg.html

　私自身のwikiにもわかりやすそうなSVG関係のサイトのURLがありますのでそれも参考にしてみてください。

　今現在このSVGのｊｓを使ってSVG画像を動かそうと頑張っているところです。
　こんなの↓

今後進展がありましたら、ブログやwikiにあげていきたいと思います。

　最後まで読んでいただきありがとうございました。