I tryed create full svg web site, that report.

1. Full SVG Web Site を
作ろうと思って
古くて最近盛り上がってる（はず）の
画像形式について話すよ！
2014/05/31
Ohotech #9
（自称）Ohotech札幌支部員
まんじゅ（´ん｀）

2. 本日のサマリー
●
古くてナウい（？）SVGは一体何者なのかについて
●
SVGでなにができるのか
●
SVGで自分がやろうとしていることとか

3. さて、

4. このスライドもSVGで作ろうと
思ったのですが

5. 「SVGでそんな

6. 『大量のオブジェクトを制御して

7. つけたり消したりして

8. 容量肥大化する』のは

9. 嫌だなあ……。

10. という事で普通にLibre Office Impressで進め
ます。

11. 自己紹介
●
Who am I ?

13. で、

14. SVG #とは

15. SVGとは
Wikipedia 日本語版 「Scalable Vector Graphics」の項より
●
2次元ベクターイメージ用の画像形式
●
以下もサポート
– アニメーション
– ユーザーインタラクション
●
XMLがベース
– HTMLもXMLベースです

16. ベクターイメージ
●
Vector Image
●
座標系
●
グラフ

17. ベクターイメージ
●
数学的に図形を表現
– 点と点の距離
– 方程式のグラフ
– ベジェ曲線とか
●
拡大しても画像が劣化しない
●
描画する際は演算するのでコンピューターには負荷はかかる
– （けれど今のコンピューターの処理能力では気にならない）

19. 「方眼紙のマスに色をつけて塗りつぶす」
のがラスタ―
「方眼紙にグラフを書いて表現する」
のがベクター

20. 改めて、

21. SVGとは
Wikipedia 日本語版 「Scalable Vector Graphics」の項より
●
2次元ベクターイメージ用の画像形式
●
以下もサポート
– アニメーション
– ユーザーインタラクション
●
XMLがベース
– HTMLもXMLベースです

22. アニメーション
●
パラパラアニメ形式ではない
●
どちらかというとAdobe (旧:Macromedia)Flashっぽい
– パスの変形
– パスの変形による図形の変形

23. アニメーションの実装方法
●
３つある
– SVGのanimation要素やtransform要素
– CSSのanimation要素やtransform要素
– Javascriptでゴリゴリ動かす
●
CSSやJavascriptでの実装が多い
– しかし問題が
●
Javascriptは上手に組まないとリソースを食いつぶす（ちょっと重要）
●
CSSにSVGのアニメーション処理まで任せちゃうの？（思想の問題）

24. Javascript実装の利点
●
Webブラウザ上で表現できることは何でもできる
●
Javascriptでアニメーションを実装したことのある人なら容易
に実装可能（かも）
●
SVGのanimation要素と比べると確実に（書いたとおりに）
動作する
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

25. Javascript実装の問題点
●
実装の仕方によってはすごく重くなる。
– たくさんのSVG画像を移動させたりするとなおのこと
●
Javascriptのアニメーション全般に言えることかな？
●
コードが肥大化する
– SVGのanimation要素などで実装できるところまでJavascriptで実装
すると面倒くさいことを色々書かないといけない
●
Javascriptで後からSVGのanimation要素を追加したり、
編集したりする分にはさほど問題ないかな？
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

26. CSS実装の利点
●
SVGそのものとSVGのアニメーションを別々にできる
●
CSSでアニメーションを実装したことのある人なら容易に実装
可能（かも）
●
Javascript実装よりは取っ付き易い
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

27. CSS実装の問題点
●
コードが肥大化する
– ブラウザエンジンによっての記述を足したりしないと
いけない場合もある
●
のかな？
●
SVG要素内で操作できない属性がある
– 位置や範囲を指定するxやyやcxやcyなどの属性
– HTML要素を操作するのには向いているのかな？
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

28. SVG実装の利点
●
一つのSVGにまとめることができる
●
描画タイミングはブラウザが持ってくれる
– CSSもかな？
●
案外CSSでアニメーションを実装したことのある人なら容易に
実装可能
– 筆者の個人的憶測による
●
Javascript実装よりは取っ付き易い
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

29. SVG実装の問題点
●
細かいことができない
– シーンの切り替えや動くタイミングの厳密な定義が難しい
– SVGファイルの構成によっては動かないこともある
●
ブラウザによって動作が違ったりも
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

30. なので
「部品はSVG」
「全体制御はJavascript」
というのがお勧めです。
参考資料：svg要素の基本的な使い方まとめ アニメーション
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

31. Demo
実際みてみる

32. で、

33. 個人的にやろうとしていること

34. Full SVG Web Site を
作ろうと思って
古くて最近盛り上がってる（はず）の
画像形式について話すよ！
2014/05/31
Ohotech #9
（自称）Ohotech札幌支部員
まんじゅ（´ん｀）

35. Full SVG Web Site
全部SVGのWebサイト

36. あわよくば

37. ポートフォリオ
全部SVGのポートフォリオ

38. 今の成果物
●
https://github.com/manzyun/FullSVGWebPage

39. 参考資料としてMozilla Developer Network
Preference is MDN

40. 「だって、某プログラミングの動画入門サイトの
HTMLやCSSの参考リファレンスも、ここを推し
てたよね」
（＾ん＾

41. 見てみた

43. （＾ん＾；

44. （いや、きっとリファレンスは大丈夫だ）
（＾ん＾

45. 見てみた

48. （´ん｀

49. （´A｀

50. MDNでこれなの？！

51. （もしかして、
翻訳されてないから使われてないのか？）
（´ｑ｀

52. （であれば翻訳したら使われ始める？）
（´A｀

53. （今引き受けてる仕事も
暇になっちゃったしなあ）
（´A｀

54. （Ubuntuの方でろくに
翻訳したことないしなあ）
（´A｀

55. （……、）
（´A｀

56. （……暇つぶしに翻訳してみるか）
（´ん｀

57. ということで、

60. ということで、
Mozilla Developer Networkの翻訳は

61. すごく気楽にできる！

62. Demo
実際に翻訳してみる

63. まとめ
●
SVGはオープン標準画像データとして勧告してる
– W3Cで規格されてるよ
– 実は2001年からある規格だよ
●
アニメーションも可能
– 使い方によってはFlashの代替になるかも？
– ただしソースコードが見えるので使いドコロは見極めよう
●
Mozilla Developer Networkで翻訳してみないか？
– みんなの翻訳で幸せになれる人がきっと居る

64. このスライドはまんじゅ（´ん｀）（高橋秀羅）により
クリエイティブ・コモンズ 表示 4.0ライセンスの元に提供されております。
ご静聴ありがとうございます
●
参考資料
– Wikipedia
●
http://ja.wikipedia.org/
– Mozilla Developer Network
●
http://developer.mozilla.org/ja/
– SVG要素の基本的な使い方まとめ
●
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm