[&] Web Directions East 08 (Doug Schepers)

Reinventing Fire

Web Directions East 08
-----------------------------
Doug Schepers - Standards based graphics in the browser
http://schepers.cc/

SVG and Canvas : Standards based open graphics

Google Map の中で SVGが使われている。
VML(Vector Markup Language)
W3C の HTML5 の中で扱われている。
canvas はベクトルを使ってラスターを作成している。

ラスターとベクターの違い。
ラスターはコンテンツの再利用に適している。
SVG と Canvas の違い。
リテインドモード SVG は DOM に保存されている。

みんな角丸が好き（笑）
SVG/canvasの中でスクリプトを使うこともできる。
どうやって SVGを作るのか。
無料の InkScape, Illustorator などがつかえる。

Wikipedia は画像／図表を SVG でアップロードすることを推奨している。
Lively Kernel
http://research.sun.com/projects/lively/
Processing.js
http://ejohn.org/blog/processingjs/
SMIL の活用。

SVG の場合、要素が増えるほど遅くなる。
Firefox, WebKit (Safari, Chrome), Opera で使える。IE が例外。
プラグインを使えば IEの中でも使える。
iPhone でも SVGが使える。
多くの携帯電話 (au/KDDI) などで使える。マップ用途。

SVGは構造化された文章に向いている。
ローカライゼーションに向いている。
フックが可能、APIが用意されている。
SMILでタイムラインを合わせることができる。
JavaScript が駆使できれば、様々なことができる。

SVG in CSS
将来、混在させることができるようになる。

SVG in text/html and XHTML
簡単な使い方は XHTML の中に object/embed で埋め込む。
SVG が直接文章の中で使えるように W3Cと作業を進めている。

Common Open Graphics
- Common API for SVG and Canvas : 同じ API で同じ画像が作れる
- SVG , Canvas の統合、シームレスに。

schepers@w3.org

SVG 1.2 で音や動画が扱える。Opera でサポートされている。
JIS など日本でも標準規格化されれば広まっていくと考える。