SVGアニメーション

SVGの機能を使ってアニメーションさせる
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/animate.html

しかしながら、SMILは廃止の方向のうごきもあるらしい・・・・（？
http://postd.cc/the-state-of-svg-animation/

なので、参考記事に記載されているjavascriptで実装できるプラグインを試してみようと思いました。
GreenSock
http://greensock.com/

sample
https://tomo.mobi/test/greensock/sample1.html

設定や記述に関してはとりわけ特殊な事は無いです。
htmlのDOMと同じようにつかえるみたい。
※ただし、DOMを生成する時はhtmlとは違うので、生成する記述が少し違う。次回の更新時に記述方法を追記します。（書いたよ→http://www.tomo.mobi/?p=594）

htmlのぶぶんにid設定
jsでDOMを指定するため。

 <path id="android" d="
M49,89c0,2.2,1.8,4,4,4h4v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h8v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h4c2.2,0,4-1.8,4-4v-40H49V89z 

M39,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C45,51.5,42.4,48.9,39,48.9z 

M107.1,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C113.1,51.5,110.5,48.9,107.1,48.9z 

M87.3,25.5l5.2-5.2c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-6,6c-3.2-1.6-6.8-2.6-10.6-2.6c-3.8,0-7.4,1-10.6,2.6l-6-6c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l5.2,5.2c-6,4.4-9.8,11.49.8,19.4h48C97.1,36.9,93.3,29.9,87.3,25.5z 

M65,36.9h-4v-4h4V36.9z 

M85.1,36.9h-4v-4h4V36.9z
" fill="blue"/>

jsぶぶん。DOMでCSS操作。 TweenMax等はGreensockのAPI。

(function() {
var container = document.getElementById('container');
var android = document.getElementById('android');


TweenMax.set(['svg'], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set([container], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set(android, {
	transformOrigin: '50% 50%'
})

var tl = new TimelineMax({
	repeat: -1,
	paused: false,
	repeatDelay: 0,
	immediateRender: false
});

tl.timeScale(3);

tl.to(android, 10, {
	x: 150,
	y: 150,
	scale: 3,
	alpha: 0,
	ease: Power1.easeInOut
},'+=1')
})()

しかしながら、自由度はSMILの方がやはり高い。
SVGパスのアニメーション化はやはり諦めるしか無いのか・・・・（涙
CSS+javascriptでのアニメーションだけでは、今までと進歩が感じられ無いと思ってしまうのは私だけかな。
Flashのパスアニメーションをおもわず思い出してしまう。

でもでも、モバイル端末（※スマートフォン）でのコンテンツ作りにかかせないと思うのでもう少し勉強続けたいと思います。