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にあげていきたいと思います。

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

5 件のコメント:

  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. Wow! After all I got a web site from where I can actually get valuable information regarding my study and knowledge. 일본야동

    Also feel free to visit may webpage check this link
    한국야동

    返信削除
  3. Hello friends, its fantastic article about teaching and entirely explained, keep it up all the time. 한국야동닷컴

    Also feel free to visit may webpage check this link
    국산야동

    返信削除
  4. Thanks for sharing. I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one. 국산야동

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

    返信削除
  5. Amazing article. Your blog helped me to improve myself in many ways thanks for sharing this kind of wonderful informative blogs in live. I have bookmarked more article from this website. Such a nice blog you are providing. 중국야동넷

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

    返信削除