svg demos

テンポラリーなページです。そのうち blog にまとめます。

including SVG

HTML 上に SVG を表示できるか

	Opera	Firefox	Chrome
<object> tag	OK	OK	OK
<img> tag	OK	NG:Fx3.6 / OK:Fx3.7	OK
<embed> tag ( HTML5)	NG	OK	OK
<iframe> tag	OK	OK	OK
<svg:image>	NG		OK

SVG の語彙を混在できるか

HTML に SVG を混在させるためには XHTML にしなければならなかった。HTML5 の spec 内には <svg> が登場する予定。これにより、text/html でも SVG の語彙を混在させることができる。<svg> の中には http://www.w3.org/2000/svg に属する要素を展開することができる。

	IE 9 PP	Opera	Firefox	Chrome
SVG in XHTML (A)	OK	OK	OK	OK
SVG in XHTML (B)	OK	OK	OK	OK
SVG in HTML (HTML5)	OK	NG	OK	NG

CSS で SVG を画像として扱うことができるかのテスト

	IE 9 PP	Opera	Firefox	Chrome
background-image		OK
content value		OK

simbol

外部にある simbol を参照できるかのテスト

	IE 9 PP	Opera	Firefox	Chrome
<use> tag (refer local URI)		OK	OK	OK
<use> tag (refer non-local URI)		OK	OK	NG

refer non-local URI について外部のシンボルを参照できれば、CSS と同じように複数のドキュメントから参照しているシンボルを一括して差し替えなどが行える。例えば、UI のボタンなどを外部にシンボル化しておけば一括で差替することができる。

Filter Effect

既存の CSS では表現できないぼかし、色相変換などが可能。表現の幅を大きく広げることができる。

外部にある filter を URI で参照できるか

	IE 9 PP	Opera	Firefox	Chrome
filter_effects (refer document-local)	NG	OK	OK	OK
filter_effects (refer document-external URI:s)	NG	OK	OK	OK

IE 9 に Filter が実装される予定はない。

Filter の内容が書きかえられた時、それが反映されるか

まだ

foreignObject 経由で間接的に HTML の要素に Filter を適用できるか

	IE 9 PP	Opera	Firefox	Chrome
apply_svg_filter_to text elements
apply_svg_filter_to_<img> element
apply_svg_filter_to_form input
apply_svg_filter_to_<iframe> element
apply_svg_filter_to_<video> element	NG	OK	OK	NG
apply_svg_filter_to_video /w slider	NG	Maybe	OK	NG

Animation

	IE 9 PP	Opera	Firefox	Chrome
key frame	NG	OK	OK	OK
path	NG	OK	NG	OK

IE ではとてもよく似ている使用として HTML + TIME がある

SVG /w SMIL work in Opera, Fx, Webkit
VML /w TIME work in IE 5.5 and up
SVG /w SMIL & TIME work in Opera, Fx, Webkit
HTML + TIME work in IE 5.5 and up

つまり IE で SVG にアニメーションを割り当てるにはスクリプトのみ ?

Script

	IE 9 PP	Opera	Firefox	Chrome
script : CTM + SVGPoint	NG		OK	OK

その他の demo

spheremap 書き換え (セブンイレブン) work on Opera, Fx
* Webkit は filter の値を書き換えられない
* IE は filter 実装の予定はない
ルーレット (ストップは未実装)
background-image のテスト
- 線グラデ
- 円グラデ
- 円
- パス
- テキスト
- アニメーション
- スクリプト (スクリプト自体は動作せず)
- <foreignObject> (HTML) (HTMLは読み込めず)
- <text> + SVG Fonts
スライド用背景

W3C 内の Test Suite

http://www.w3.org/Graphics/SVG/WG/wiki/Test_Suite_Overview