SVGとやらを触ってみた

memo

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あたりがきそうな感じがします。
Comments