Vector Graphicsを扱うには？

ブラウザの標準機能だけでベクターグラフィックスを扱うには次の方法があります。

<canvas>タグ

• Drawing Graphics with Canvas
  「参考」に掲載されているリンクも役に立ちます。
• <canvas>タグ リファレンス
  サンプルをその場で実行して表示を確認できます。

SVG

• Scalable Vector Graphics (SVG) 1.1 仕様
• Mobile SVG プロファイル：SVG Tiny と SVG Basic

VML

• ベクトルマークアップ言語(VML) W3Cへの提議
• Introduction to Vector Markup Language (VML)

ここに挙げたもの以外には CSS positioning がありますが、 積極的に使う理由が見つからないので本稿では扱いません。

これらは、ブラウザによって実装の有無があるので次の表にまとめました。

*1： SVG 1.1 のサブセットです。 宣言型アニメーションなどが実装されていません。
*2： SVG 1.1 Basic and SVG 1.1 Tiny のスーパーセットです。

クロスブラウザ

IE で <canvas>タグ を実現する方法

• Canvas in IE
• ExplorerCanvas
• IECanvas

IE で SVG を実現する方法

• Adobe SVG Viewer

クロスブラウザ化のアプローチ

• DrawingCanvas.js 0.03 公開
  ライン+αの実装ですが「こういうことが可能なのか！」という発見があります。