SVG(Scalable Vector Graphics)のサポートをするらしいIE9。ということでブラウザ上でのベクター画像の表示はSVGが本命になるとかならないとか。
SVGはグラフィックだけでなく、アニメーションもできるらしいので少し触ってみた。
ただ、SVGの仕様(日本語訳)を見てもよくわからなかったので、今回はライブラリとして有名なRaphaëlを使いました。
RaphaëlはFirefox 3.0+、Safari 3.0+、Opera 9.5+、Internet Explorer 6.0+ と各ブラウザでの動作環境。
簡単なベクターデータを作成して、アニメーションさせてみる。
var canvas = Raphael(document.getElementById("canvas"), 500, 500);
var p = canvas.path("M200,200a100,100,0,1,0,0,0.01").attr({stroke:"#FFFFFF"});
var c = canvas.circle(200, 200, 30).attr({fill:"#333",stroke:"#FFFFFF"});
var ccfill = c.attrs.fill;
c.animateAlong(p,2000,false,callback);
function callback(){
ccfill = c.attrs.fill;
if("#ff3399" != ccfill){
ccfill = "#ff3399";
}else{
ccfill = "#333";
}
c.animate({fill:ccfill},1000,"backOut",func);
}
function func(){
c.animateAlong(p,2000,false,callback);
}
としてみると
こんな感じ。
確かにいろいろできそうだ。動的なグラフの描画とか、Flashの代替手段に使用したりできそうですね。
HTML5、CSS3にくわえてSVGあたりがきそうな感じがします。
2 件のコメント for SVGとやらを触ってみた
taketin | 2010/05/06 at 23:22
新しい事いろいろやってるんすねー。俺もがんばろ。