SVG Girlの公開と内部実装 - KAYAC engineers' blog

乗り換え以外で初めてアメリカ行きました。ago（@kyo_ago）です。 すでに先週のこととなってしまいましたが、jsdo.it上でSVG Girlというコンテンツを発表したのでご紹介させていただきます。 （現在IE9のリリースに合わせて英語版のみ公開しています。日本語版は26日の日本語版IE9リリースにあわせて公開を予定しています） SVG Girlって？ SVG GirlはSVGを使ったアニメーション作品で、動画コンテンツの中身をすべてSVGのみで表現しています。 先週開催されたMicrosoft主催のMIX11のキーノートでも発表され（00:08:40ぐらいからご覧いただけます）、大画面に表示されたアニメーションで会場をわかせました。 SVGって？ SVGはテキストで表現されたベクターデータで、XMLで線画情報を保持しています。 ブラウザ上からは通常のDOM API経由で操作すること

[yksk]

ありがとうございます。

[ago_kyo]

ラスベガスでは全く金使いませんでした

[takuya_1st]

SVG girl について

[chi-bit]

『SVG Girlの公開と内部実装 | tech.kayac.com - KAYAC engineers' blog』

[nasu_t]

svg javascript

[kojika17]

ふむふむ RT @mr_myself00: SVG Girlの公開と内部実装 | tech.kayac.com - KAYAC engineers' blog

[izit_kosuke]

こちらはSVG女子の内部実装。原理はコマ撮りやパラパラアニメーションってこと？オレ勉強不足…。

[yoya]

「メモリ使用量も400MB程度まで軽量化」多いのか少ないのかわかんないｗ

[nilab]

「.ai形式で作成されたアニメーションの各コマを.svg形式で出力したあと、JSでDOM Treeにすべてのコマを追加してsetIntervalでdisplay:none」SVG Girlの公開と内部実装 tech.kayac.com

[ginpei]

innerHTMLより、createContextualFragment()やinsertAdjacentHTML()を使った方が速い、らしい。どちらも初耳。

[ogijun]

すげーーーー

[tarchan]

IE9の実装はまだまだ差異があるのか。

[hisasann]

苦労されてますなー。かっこいい！

[north_god]

"ai形式で作成されたアニメーションの各コマを.svg形式で出力したあと、JSでDOM Treeにすべてのコマを追加してsetIntervalでdisplay:none"

[edvakf]

createContextualFragment するときは selectNodeContents しないとだめ→ http://j.mp/h4SvaA SVG はインラインにするより Object 要素のほうがいいらしい http://j.mp/ghvcrk

[site159]

SVGガールの舞台裏　やっぱイラレで書き出しっすか。。。

[juner]

これは面白い！ QT: SVG Girlの公開と内部実装 | tech.kayac.com - KAYAC engineers' blog

[terazzo]

今後は差分取ってanimateタグ生成する最適化とかアリなのかなー。むしろ遅くなるかもしれないけど。

[honeybe]

あとでよむ。

[teppeis]

「現在の実装では.ai形式で作成されたアニメーションの各コマを.svg形式で出力したあと、JSでDOM Treeにすべてのコマを追加してsetIntervalでdisplay:noneしています」