SVG animation

Scalable Vector Graphics SVGは2次元グラフィックスをXMLで記述するための言語詳しくは↓ W3Cの仕様（SVG1.1） https://triple-underscore.github.io/SVG11/ Living Standardの仕様 https://momdo.github.io/html/embedded-content-other.html#svg-0

SVG animation 1. CSS 2. JavaScript 3. SMIL

1. CSS 特徴 - 書くのは簡単 - 制御がほとんどできない - JavaScriptと組み合わせればいい感じ

2. JavaScript 特徴 - だいたいのことができる - 書くのがめんどくさい - ライブラリが豊富

2. JavaScript ライブラリが豊富 - Snap SVG http://snapsvg.io/ モーフィングなどアニメーションが作りやすい

2. JavaScript ライブラリが豊富 - Zdog https://zzz.dog/ 3D表現ができる

3. SMIL 特徴 - プロパティで設定できる - イベント制御もできる

3. SMIL Synchronized Multimedia Integration Language WWW上でマルチメディアコンテンツを表現するためのマークアップ言語の一つである。静止画、動画、音声、文字（テキスト）などの、位置レイアウト、時間軸上でのレイアウトを、Extensible Markup
Language (XML) フォーマットで記述することで統合し、再生させることができる。（引用元）wikipedia - SMIL https://ja.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language

3. SMIL 動作環境 - IE・MS Edgeでは動かない - blinkは非推奨を保留という状態 → 動作環境が不安定なので使用されない

なぜ、この話をしたか - Microsoft Edgeが「Chromium」ベースとなることで SMILが利用可能になる - SVG animation2の草案を更新しているのでもっと機能が充実されるはず →
きっとSMILの時代が来る・・・かも

SVG animation

SVG animation

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Technology

Featured

Transcript

SVG animation

Scalable Vector Graphics SVGは2次元グラフィックスをXMLで記述するための言語詳しくは↓ W3Cの仕様（SVG1.1） https://triple-underscore.github.io/SVG11/ Living Standardの仕様 https://momdo.github.io/html/embedded-content-other.html#svg-0

SVG animation 1. CSS 2. JavaScript 3. SMIL

1. CSS 特徴 - 書くのは簡単 - 制御がほとんどできない - JavaScriptと組み合わせればいい感じ

2. JavaScript 特徴 - だいたいのことができる - 書くのがめんどくさい - ライブラリが豊富

2. JavaScript ライブラリが豊富 - Snap SVG http://snapsvg.io/ モーフィングなどアニメーションが作りやすい

2. JavaScript ライブラリが豊富 - Zdog https://zzz.dog/ 3D表現ができる

3. SMIL 特徴 - プロパティで設定できる - イベント制御もできる

3. SMIL 動作環境 - IE・MS Edgeでは動かない - blinkは非推奨を保留という状態 → 動作環境が不安定なので使用されない

なぜ、この話をしたか - Microsoft Edgeが「Chromium」ベースとなることで SMILが利用可能になる - SVG animation2の草案を更新しているのでもっと機能が充実されるはず →