i want make full svg website
Post on 28-Nov-2014
3.719 Views
Preview:
DESCRIPTION
TRANSCRIPT
Full SVG Web Site を作ろうと思って
古くて最近盛り上がってる（はず）の
画像形式について話すよ！
2014/05/31Ohotech #9
（自称）Ohotech札幌支部員まんじゅ（´ん｀）
本日のサマリー
● 古くてナウい（？）SVGは一体何者なのかについて● SVGでなにができるのか● SVGで自分がやろうとしていることとか
さて、
このスライドもSVGで作ろうと思ったのですが
「SVGでそんな
『大量のオブジェクトを制御して
つけたり消したりして
容量肥大化する』のは
嫌だなあ……。
という事で普通にLibre Office Impressで進めます。
自己紹介● Who am I ?
で、
SVG #とは
SVGとは
Wikipedia 日本語版 「Scalable Vector Graphics」の項より
● 2次元ベクターイメージ用の画像形式● 以下もサポート
– アニメーション– ユーザーインタラクション
● XMLがベース– HTMLもXMLベースです
ベクターイメージ● Vector Image● 座標系● グラフ
ベクターイメージ
● 数学的に図形を表現– 点と点の距離– 方程式のグラフ– ベジェ曲線とか
● 拡大しても画像が劣化しない● 描画する際は演算するのでコンピューターには負荷はかかる
– （けれど今のコンピューターの処理能力では気にならない）
「方眼紙のマスに色をつけて塗りつぶす」のがラスタ―「方眼紙にグラフを書いて表現する」のがベクター
改めて、
SVGとは
Wikipedia 日本語版 「Scalable Vector Graphics」の項より
● 2次元ベクターイメージ用の画像形式● 以下もサポート
– アニメーション– ユーザーインタラクション
● XMLがベース– HTMLもXMLベースです
アニメーション
● パラパラアニメ形式ではない● どちらかというとAdobe (旧:Macromedia)Flashっぽい
– パスの変形– パスの変形による図形の変形
アニメーションの実装方法
● ３つある– SVGのanimation要素やtransform要素– CSSのanimation要素やtransform要素– Javascriptでゴリゴリ動かす
● CSSやJavascriptでの実装が多い– しかし問題が
● Javascriptは上手に組まないとリソースを食いつぶす（ちょっと重要）● CSSにSVGのアニメーション処理まで任せちゃうの？（思想の問題）
Javascript実装の利点
● Webブラウザ上で表現できることは何でもできる● Javascriptでアニメーションを実装したことのある人なら容易
に実装可能（かも）● SVGのanimation要素と比べると確実に（書いたとおりに）
動作する
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
Javascript実装の問題点
● 実装の仕方によってはすごく重くなる。– たくさんのSVG画像を移動させたりするとなおのこと
● Javascriptのアニメーション全般に言えることかな？
● コードが肥大化する– SVGのanimation要素などで実装できるところまでJavascriptで実装
すると面倒くさいことを色々書かないといけない● Javascriptで後からSVGのanimation要素を追加したり、
編集したりする分にはさほど問題ないかな？
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
CSS実装の利点
● SVGそのものとSVGのアニメーションを別々にできる● CSSでアニメーションを実装したことのある人なら容易に実装
可能（かも）● Javascript実装よりは取っ付き易い
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
CSS実装の問題点
● コードが肥大化する– ブラウザエンジンによっての記述を足したりしないと
いけない場合もある● のかな？
● SVG要素内で操作できない属性がある– 位置や範囲を指定するxやyやcxやcyなどの属性– HTML要素を操作するのには向いているのかな？
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
SVG実装の利点
● 一つのSVGにまとめることができる● 描画タイミングはブラウザが持ってくれる
– CSSもかな？● 案外CSSでアニメーションを実装したことのある人なら容易に
実装可能– 筆者の個人的憶測による
● Javascript実装よりは取っ付き易い
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
SVG実装の問題点
● 細かいことができない– シーンの切り替えや動くタイミングの厳密な定義が難しい– SVGファイルの構成によっては動かないこともある
● ブラウザによって動作が違ったりも
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
なので「部品はSVG」「全体制御はJavascript」というのがお勧めです。
参考資料：svg要素の基本的な使い方まとめ アニメーションhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
Demo実際みてみる
で、
個人的にやろうとしていること
Full SVG Web Site を作ろうと思って
古くて最近盛り上がってる（はず）の
画像形式について話すよ！
2014/05/31Ohotech #9
（自称）Ohotech札幌支部員まんじゅ（´ん｀）
Full SVG Web Site全部SVGのWebサイト
あわよくば
ポートフォリオ全部SVGのポートフォリオ
参考資料としてMozilla Developer Network
Preference is MDN
「だって、某プログラミングの動画入門サイトのHTMLやCSSの参考リファレンスも、ここを推してたよね」
（＾ん＾
見てみた
（＾ん＾；
（いや、きっとリファレンスは大丈夫だ）
（＾ん＾
見てみた
（´ん｀
（´A｀
MDNでこれなの？！
（もしかして、翻訳されてないから使われてないのか？）
（´ｑ｀
（であれば翻訳したら使われ始める？）
（´A｀
（今引き受けてる仕事も暇になっちゃったしなあ）
（´A｀
（Ubuntuの方でろくに翻訳したことないしなあ）
（´A｀
（……、）
（´A｀
（……暇つぶしに翻訳してみるか）
（´ん｀
ということで、
ということで、Mozilla Developer Networkの翻訳は
すごく気楽にできる！
Demo実際に翻訳してみる
まとめ
● SVGはオープン標準画像データとして勧告してる– W3Cで規格されてるよ– 実は2001年からある規格だよ
● アニメーションも可能– 使い方によってはFlashの代替になるかも？– ただしソースコードが見えるので使いドコロは見極めよう
● Mozilla Developer Networkで翻訳してみないか？– みんなの翻訳で幸せになれる人がきっと居る
このスライドはまんじゅ（´ん｀）（高橋秀羅）によりクリエイティブ・コモンズ 表示 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
top related