Firefoxではcanvasとsvgの両方に対応していますが、なぜ両方とも実装されたのでしょうか。また、canvasとsvgを比較したときのそれぞれのメリットとデメリットを詳しく教えてください。

ブラウザの対応についてですが、

Firefox、Opera - svg、canvas ともに対応。

Safari - canvas に対応。Safari3 から svg にも対応。

WinIE - canvas、svg ともに未対応 (その代わり vml に対応)。

ただし、Safari2 と WinIE は Adobe のプラグインをインストールすることで svg に対応可能。

また IE の vml を使って canvas をエミュレートする ExplorerCanvas ライブラリがある。

それぞれの比較は

http://suika.fam.cx/~wakaba/-temp/wiki/wiki?canvas

とか。

canvas の方が×が多いですが、JavaScript から動的にちょっとした図を描くのは canvas の方が手軽ではないかと思います。

導入された経緯についてはよく分かりませんが、HTML5 では canvas が目玉的に扱われていますね。

http://developer.mozilla.org/ja/docs/XTech_2005_Presentations:Ri...

canvas の実装は

• Firefox 1.5
• Opera 9
• Safari 2

SVG の実装は

• Firefox 1.5 (SVG 1.1)
• Opera 8 (TinySVG)
• Safari 3

のようです。

Firefox の SVG に関してはもっと前のバージョンから暫定的に実装されていたようですが、1.5 になって各プラットフォームで標準ビルドのグラフィックバックエンドが Cairo に統一され、Linux 版で SVG が使えるようになったのはそれからですからこのバージョンからと言ってもいいのではないでしょうか。