SVGでアニメーションを実装する為に、必要な前提知識をまとめています。 SVGと親和性の高いJavaScriptからアニメーションを行う方法です。 また、二次元の図形を描画する際に選択肢となる、Canvasとの比較と、使い分けをまとめています。。

1. SVGアニメーションを
実装してみよう！
JavaScript祭スピンオフ！フロントエンド祭り in Co-Edo
Let s begin SVG!

2. Self-Intoroduction
職 種：アプリケーションエンジニア(LAMP/Java/Oracle）
最近の願望：Rails開発 & スマホアプリ開発をしてみたい。
好きなもの：JavaScript

3. 一緒に勉強しましょう( ́ ▽ ` )ﾉ
Self-Intoroduction
• WordPressもくもく倶楽部@Co-Edo
• Swiftビギナーズ倶楽部@Co-Edo
http://swift-beginners.doorkeeper.jp/
http://wp-moku.doorkeeper.jp/
• Ruby on Rails ビギナーズ倶楽部@Co-Edo
http://ror-beginners.doorkeeper.jp/
勉強会やってます！

4. アクセスしてください:)
https://join.me/820-569-747

5. Today's Agenda
１）SVGって何ですか？
２）SVGの使い方
３）SVGアニメーションを実装してみよう！
４）SVG・Canvasどう使う？
５）便利なプラグイン紹介

6. １）SVGって何ですか？
■正式名称は
（スケーラブル ベクター グラフィックス）
Scalable Vector Graphics
拡張可能なベクター画像
（IE8以前は外部ライブラリが必要）

7. １）SVGって何ですか？
画像ファイル形式のひとつです。
SVGの他には、PNG、JPG、GIF等がある。
(́･ω･`) ｼｮﾎﾞｰﾝ
なんだ・・・
単なる画像ファイルか

8. １）SVGって何ですか？
数値と式で計算して
表示する画像
(`･ω･́) ｼｬｷｰﾝ
ただの画像じゃないよ！
<svg>
<circle cx="200" cy="120" r="100" fill="green" />
</svg>

9. １）SVGって何ですか？
決定的に他のファイル形式とは違う特長がある！
SVGは
XMLでマークアップする。
ベクター形式（数値や式）で画像を扱う。
JPG
PNG
GIF…etc
ビットマップ（ラスター）形式で画像を扱う。
拡大縮小をすると画像が荒れる。
拡大縮小などをしても画像が荒れない。

10. ベクターとビットマップって？
ビットマップ（ラスタ）画像
（点が集まったデータ）
ベクター画像
（数値と式のデータ）

11. SVGのいいところ
<svg>要素に、テキストが書ける。
<text>要素として記述してグラフィックの
構成要素として扱うことができるので、
SEOに有効になる。
<svg width="1100" height="500">
<text x="50" y="500" font-size="500">SVG</text>
</svg>

12. SVGのいいところ
ロゴやアイコンをSVGで保持すると、
多様化するディスプレイのサイズや、
Retinaディスプレイのような
ハイエンド機種にも対応が楽になる。

13. えっ！？でも、大変じゃない？
数値と式で
ロゴやアイコンを
書くなんてムリ！！

14. 心配無料です！
Illustratorで、SVG出力
超簡単！

15. 心配無料です！
Illustratorで、SVG出力
▪️SVGファイルを保存
「メインメニュー」>「ファイル」>「保存 / 別名で保存」>「SVG」を選択

16. ファイルを
見てみましょう

17. 心配無料です！
２）SVGの使い方
2-1）<img>タグを使う
<img src="icon.svg" />
2-2）<object>タグを使う
<object type="image/svg+xml" data="icon.svg"></object>
2-4）インラインSVG
HTML5から、インラインSVGがサポートされ、
HTML内にSVGを直接記述が可能。
2-3）CSSのBackgroundプロパティに指定
html { background-image: url(icon.svg); }

18. ３）SVGアニメーションを実装してみよう！
DEMO

19. ４）SVG・Canvasどう使う？
Canvasとは：
• 動的な2次元ビットマップ画像を描画するHTML要素。
• Canvasは、HTML5から新しく追加された。
• アニメーション機能がない。
• JavaScripベースで動的に図を描くことができる。
• ビットマップ・グラフィックスなので拡大縮小すると画質の劣化が発生する。
• 主要ブラウザの最新版で実装されている（IE8以前は外部ライブラリが必要）

20. ４）SVG・Canvasどう使う？

21. ４）SVG・Canvasどう使う？
SVG：
図形はDOM要素なので、マウスクリック等のイベントに対する実装が簡単。
なので、図形のパーツに連動した処理や、JavaScriptとの親和性が高い。
画像のサイズが大きいデータは、数値で描画できるので高速な傾向がある。
Canvas：
ビットマップなので、ピクセル操作ができる。
SVGのような、図形に対するイベント処理は難しい。
SVGのようにDOMを構成しないので、オブジェクト数が多い描画が高速。

22. ５）便利なプラグイン紹介
Snap.svg（Adobeが公開したSVG用JavaScriptライブラリ）
http://snapsvg.io/
svg.js（軽量JavaScriptライブラリ）
http://www.svgjs.com/
SVG向けJSプラグイン
・CREATEJS（Adobeがスポンサー・ActionScriptライクに記述ができる。）
http://www.createjs.com/#!/CreateJS
・jCanvas（jQueryライクに記述ができる。）
http://calebevans.me/projects/jcanvas/
・JapanMap（canvasで日本地図を表示してくれるjQueryプラグイン）
http://takemaru-hirai.github.io/japan-map/
Canvas向けJSプラグイン

23. Thank you :)