web-dev-qa-db-ja.com

html5キャンバス要素とsvg

埋め込まれたsvgで同じことができるのに、なぜhtml5キャンバス要素が必要なのですか?

24
Stefano Borini

SVGとcanvasは実際には互換性のあるテクノロジーではありません。 SVGは、すべてがかなり抽象的なモデル(SVGドキュメント)から描画される保持モードグラフィックスの一種です。一方、Canvasは一種の即時モードのグラフィックであり、モデルがなく、クライアント(JavaScript)が再描画やアニメーションなどを処理する必要があります。

35
foolip

SVGはベクターグラフィックスのマークアップ言語であり、DOMを備えています。これにより、作成後にコンテンツを非常に簡単に変更できます。

Canvasは、元に戻すボタンのないMSペイントと同じようにペイント面です。内容を変更することはできません。あなたはそれを上塗りすることができるだけです。ブラウザは画像の完全なDOMを処理する必要がないため、非常にパフォーマンスが高くなります。また、将来的にはキャンバスが3D描画に対応できる可能性があります。

17

http://people.mozilla.com/~vladimir/xtech2006/ 良い比較があります。

キャンバスを使用すると、DOMを処理する必要がなくなり、コードの記述がより速く簡単になります。 SVGも仕様としてはめちゃくちゃです...

6
Nickolay

イラスト:私のブログエンジン(ブロガー)はSVGをサポートしていません(XHTMLドキュメントではありません)。 SVGをcanvas要素に変換するツールを作成しました: http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html

3
Pierre
1
Luis

これは、単純なsvgを解析してキャンバスに描画する方法の説明です。

http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/ http://www.ikeralbeniz.net/2010/11/04/jugando-con-html5-canvas-y-svg-ii /

さらなる投稿では、svgパーサーは透明度とグラデーションで完成します

1
iker

その場合、そのような埋め込みをサポートするものについて心配する必要がないためです;-)

このように、アプリケーション開発者の焦点は、標準に準拠し、クライアント設計者に同じことをさせることです。したがって、プラグイン、バージョン、セキュリティ設定などについて心配する必要はありません。

0
mjv

これは実際には技術的な答えではありませんが、正しい答えだと思います。

肝心なのは、両方は必要ないということです。はい、ベクターグラフィックスとラスターグラフィックスには違いがあり、パス、オブジェクト、アニメーションなどを制御する方法が異なることは知っていますが、エンドユーザーにとってはすべて同じです。はい、SVGは存在が長いため、現在はもう少し強力ですが、もう少し作業を行うことで、Canvasでも同じことができます。

Canvasは、Web開発におけるXML自体に対する圧倒的な反発の一部であるというのが現実だと思います。ほとんどのWeb開発者、特に「エンタープライズ」環境の外で限られた時間とリソースで作業している開発者は、XMLの複雑さを嫌っていると思います。 Canvasは、HTML5がXHTMLよりも優先され、JSONがXMLよりも優先され、YAMLでさえXMLよりも優先されるように、一連の優先される1つだけのテクノロジーの一部です。

この考え方は、1つのメガツールが多くのことを実行するのではなく、多くの特定のツールが1つのことを正しく効率的に実行するという* nix哲学に似ていると思います。 (これは、1つのダイレクトドライブギアのシンプルさのために信じられないほど正確で高度なディレイラーテクノロジーを避けている多くの固定ギア自転車ライダーが抱く哲学にも似ています。)

誤解しないでください。XMLは、Web、プログラミング、構成、データストレージなどの究極のスイスアーミーナイフであると優秀な人々によって考えられ開発された、信じられないほど強力で優秀なテクノロジーだと思います。ただし、これは、にピクセルを描画するよりも、一連の複雑なパスを管理およびスタイル設定する方が簡単であることを意味するわけではありません。

私の答えは意見が分かれていることを知っており、これを炎にするつもりはありません。私はSVGが大好きで、(特にIEから)何年にもわたってより多くのサポートが得られればよかったのですが、標準設定者とそれに影響を与えるWeb開発者の心理のせいで、Canvasに向かう流れを感じています。

長期的には、SVGがXMLをオプションにし、JavaScriptで操作するのがより簡単で、おそらくベクターベースのCanvasコンテキストになるJSONのような構造に移行することを望んでいます。私の意見では、それがWebにとって最良の解決策になるでしょう。

0
user636044