2012年12月21日金曜日

SVG

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

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

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

まずSVGとは・・・?

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


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

 

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

HTMLはこんな感じです。↓



JavaScriptはこんな感じです。↓

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

















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

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

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

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

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

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

6 件のコメント:

  1. you have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site 야한동영상

    Also feel free to visit may webpage check this link
    야설

    返信削除
  2. I got really good information from this content, thanks for sharing. 바카라사이트

    返信削除
  3. Fabulous, what a weblog it is! This blog provides valuable information to us, keep it up. 파워볼

    返信削除
  4. I've read this post and, if it's possible, I'd want to provide some suggestions or suggestions to you. Perhaps you could write a follow-up article based on this one. I'd like to learn more about it. Thank you very much! free games online

    返信削除
  5. Mysedgwick walmart Login – Guys!! In this article, I will talk about the mysedgwick walmart Login.

    返信削除
  6. The article is really extensive, detailed, and clear! I had a great harvest after reading your post! It's intriguing, and your post gave me new perspective! Despite reading several other articles on the issue, I was convinced after reading yours. drift boss

    返信削除