Download - I want Make full svg website
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っぽい
– パスの変形– パスの変形による図形の変形
アニメーションの実装方法
● 3つある– 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のポートフォリオ
今の成果物● https://github.com/manzyun/FullSVGWebPage
参考資料としてMozilla Developer Network
Preference is MDN
「だって、某プログラミングの動画入門サイトのHTMLやCSSの参考リファレンスも、ここを推してたよね」
(^ん^
見てみた
(^ん^;
(いや、きっとリファレンスは大丈夫だ)
(^ん^
見てみた
(´ん`
(´A`
MDNでこれなの?!
(もしかして、翻訳されてないから使われてないのか?)
(´q`
(であれば翻訳したら使われ始める?)
(´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