SVG vs Canvas

SVGとCanvasで、同じ図形をHTMLに直接埋め込んで描画してみた。
たぶん、ほとんどのブラウザではそのままでは見えないと思う。
今のところ、Firefoxでしか試していない。
バージョン3.6だと"HTML5 parser"を有効にするとそのまま見ることができる。
"HTML5 parser"を有効にする方法は、アドレスバーに"about:config"と入力し、"html5.enable"の項目上で右クリック→"切り替え"を選択。
ただし、3.6でもデフォルトでは無効になっており、この切り替えは自己責任でという扱いのようだ。
"HTML5 parser"の機能が無くても、JavaScriptのForce SVGというライブラリを使用して、擬似的に見ることができるようだ。
が、空要素タグでの記述ができないようだ。
Force SVGについては、こちらのページで。
このページはSVGで空要素タグを使っているため、今のところFirefoxの3.6以上でHTML5 parserを有効にして見るしかないと思う。
ただし、XHTML形式で記述すると、HTML5 parserを有効にしなくてもFirefoxで見ることはできる。
XHTMLで記述した例はこちら。

SVG

Canvas

うーん。しかしこうやって並べてみると、少なくとも静止画像の場合はSVGの方がはるかに楽だし記述が自然だな。
しかも、SVGはベクター描画でCanvasはピクセル描画のため、画像を大きくすればするほど違いは歴然となる。
SVGの方が断然きれい。
今巷ではCanvasが騒がれているが、SVGも利用しない手はないだろう。
でも、それは以前から分かっていたことだ。
IEはようやくバージョン9になってSVGをサポートするそうだが遅すぎだろう。
少なくともSVGに関しては、５年前にそうなるべきだったはずだ。
Microsoftの罪は大きい。
VMLなる標準でも何でもない独自仕様にこだわり、SVGを無視し続けた。
SVGだけでなく、標準の技術を拒み続けた。
その結果ブラウザ製品の中では、断トツで時代後れのものとなり、ユーザーがどんどんと離れていった。
当たり前だろう。
今後、世界標準を策定していく際に、Microsoftの独断と我儘は無視するべきだと思う。