正直、自分から皆様に技術的なことを言えることがほとんどないです・・・
なので今回は自分が少しかじっている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画像を動かそうと頑張っているところです。
こんなの↓
最後まで読んでいただきありがとうございました。
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
야설
I got really good information from this content, thanks for sharing. 바카라사이트
返信削除Fabulous, what a weblog it is! This blog provides valuable information to us, keep it up. 파워볼
返信削除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
返信削除Mysedgwick walmart Login – Guys!! In this article, I will talk about the mysedgwick walmart Login.
返信削除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
返信削除