jQuery SVG対Raphael [終了]

私はSVGとJavaScript / jQueryを使用したインタラクティブなインターフェースに取り組んでおり、RaphaelとjQuery SVGのどちらを使用するかを決定しようとしています。知りたい

1. 2つの間のトレードオフとは
2. 開発の勢いがあるようです。

RaphaelでのVML / IEサポートや、jQuery SVGのプロット機能は必要ありません。私は主に、SVGキャンバスで個々のアイテムを作成、アニメーション化、および操作する最もエレガントな方法に関心があります。

私は最近RaphaelとjQuery SVGの両方を使用しました-そしてここに私の考えがあります：

ラファエル

長所：優れたスターターライブラリー。SVGで多くのことをすばやく簡単に実行できます。よく書かれ、文書化されています。たくさんの例とデモ。非常に拡張可能なアーキテクチャ。アニメーションに最適です。

短所：実際のSVGマークアップの上のレイヤーであり、グループ化などのSVGでより複雑なことを実行することを困難にします（グループはサポートしますが、グループはサポートしません）。既存の要素の編集とはうまく機能しません。

jQuery SVG

長所： jQueryプラグイン（すでにjQueryを使用している場合）。よく書かれ、文書化されています。たくさんの例とデモ。ほとんどのSVG要素をサポートし、要素へのネイティブアクセスを簡単に許可

短所： Raphaelほど拡張性のないアーキテクチャ。（SVG要素の構成など）いくつかのものがより適切に文書化される可能性があります。既存の要素の編集とはうまく機能しません。アニメーションはSVGのセマンティクスに依存しています。

Raphaelの純粋なSVGバージョンとしてのSnapSVG

SnapSVGはRaphaelの後継です。SVG対応のブラウザでのみサポートされ、SVGのほぼすべての機能をサポートします。

結論

迅速かつ簡単に何かをしている場合、ラファエルは簡単な選択です。もっと複雑なことをする場合は、Raphaelよりもはるかに簡単に実際のマークアップを操作できるため、jQuery SVGを使用することにしました。また、jQuery以外のソリューションが必要な場合は、SnapSVGが適しています。

後世のために、私は最終的にRaphaelを選択したことに注意したいと思います。これは、クリーンなAPIと「無料」のIEサポートのため、またアクティブな開発が有望に見えるためです（たとえば、イベントサポートは0.7で追加されたばかりです）。ただし、質問は未回答のままにしておきます。JavaScript+ SVGライブラリを使用した他のユーザーの経験について聞いてみたいと思います。

私はラファエルの大ファンで、開発の勢いが強くなっているようです（バージョン0.85が先週リリースされました）。もう一つの大きなプラスは、その開発者、ということであるドミトリーBaranovskiyは、現在、ラファエルチャート作成プラグイン、に取り組んでg.raphaelそのはかなりツルツルになりつつのように見える、（出力のいくつかのサンプルは上の初期のバージョンからあるのFlickr） 。

ただし、SVGライブラリミックスに別の可能性のある候補を投入するためだけに、GoogleのSVG Webは確かに非常に有望に見えます（私はFlashの大ファンではありませんが、SVG非対応ブラウザーでのレンダリングに使用しています）。特に注目されるのは、特にSVG Openカンファレンスが近づいている場合です。

Raphaelの方がセットアップと実行がはるかに簡単ですが、Raphaelでは不可能なSVGでの表現方法があることに注意してください。上記のように、「グループ」はありません。これは、座標変換のレイヤーを実装できないことを意味します。代わりに、使用できる座標変換は1つだけです。

デザインがネストされた座標変換に依存している場合、Raphaelは適していません。

ああラファエルは6月以来大幅に進んでいます。それを使用できる新しいグラフ作成ライブラリがあり、これらは非常に目を引くものです。Raphaelは完全なSVGパス構文もサポートし、本当に高度なパスメソッドを組み込んでいます。私のサイト（恥知らずなプラグイン）で1.2.8+を見て、そこからDmitryのサイトに跳ね返ってください。 http://www.irunmywebsite.com/raphael/raphaelsource.html

全く無関係ではないと思いますが、キャンバスを考えましたか？プロセスJSのようなものはそれをより簡単にすることができます。

svgwebも確認してください。Flashを使用してIEでsvgをレンダリングし、オプションで他のブラウザーで（ブラウザー自体がサポートする以上のものをサポートする場合）。

http://code.google.com/p/svgweb/

私はRaphaelの反対票を投じます-クロスブラウザーのサポート、クリーンなAPI、および一貫した更新（これまでのところ）は、それを使用する喜びです。jQueryでも非常にうまく機能します。処理はクールですが、現時点では最先端のもののデモとしてより役立ちます。

JavaScriptの初心者として、Rapahelのサンプルはそれほど簡単ではないことがわかりました。実際のステップバイステップチュートリアルであるhttp://cancerbero.mbarreneche.com/raphaeltutをお勧めし ます。

IE6 / IE7を気にしない人のために、ラファエルを書いた同じ男が、特に最近のブラウザのため、SVGエンジンを構築しました：Snap.svgは ...彼らは良いドキュメントと本当に素敵なサイトを持っている：http://snapsvg.io

snap.svgは、箱​​から出してすぐに使いやすく、既存のSVGを操作/更新したり、新しいものを生成したりできます。あなたはsnap.io aboutページでこれを読むことができますが、ここに簡単な要約があります：

短所

• snapの機能を利用するには、古いブラウザーのサポートを断念する必要があります。RaphaelはIE6 / IE7などのブラウザーをサポートし、スナップ機能はIE9以降、Safari、Chrome、Firefox、Operaでのみサポートされます。

長所

• マスキング、クリッピング、パターン、完全なグラデーション、グループなどのSVGのすべての機能を実装します。

• 既存のSVGを使用する機能：Snapを使用するためにコンテンツをSnapで生成する必要はなく、一般的なデザインツールでコンテンツを作成できます。

• シンプルで実装が簡単なJavaScript APIを使用した完全なアニメーションのサポート

• リソースコンテナーやスプライトシートのように、実際にレンダリングすることなく、SVGの文字列（たとえば、Ajax経由で読み込まれたSVGファイル）を操作します。

興味があればチェックしてください：http : //snapsvg.io

ここではまだ触れていません。Dojox.drawingもご覧ください。これは、優れたSVG描画機能も提供します。それはかなり印象的な機能のセットを持っています。私はそれを使ってプロジェクトを始めたばかりですが、RaphaelやJQuerySVGよりも（少なくとも機能の点では）はるかに優れているようです。

このプレゼンテーションは、Raphael / JQuerySVGの代わりに使用することを私に確信させました：http : //www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

リファレンス：http : //dojotoolkit.org/reference-guide/dojox/index.html

Dojocampusに関するリファレンス：http ://docs.dojocampus.org/dojox/drawing

Dojo（Dojoxを含む）をダウンロード：http ://dojotoolkit.org/download/

あなたが見てみたいかもしれない別のsvg javascriptライブラリはd3.jsです。http://d3js.org/

私はRaphaelJSを使用することを好みます。RaphaelJSには優れたクロスブラウザ機能があるからです。ただし、一部のSVGおよびVML効果は、RaphaelJS（複雑なグラデーション...）では実現できません。

Googleは、IEでSVGサポートを有効にする独自のライブラリも開発しました：http : //svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

VMLとIE8のサポートが必要ない場合は、Canvas（PaperJSなど）を使用してください。Windows 7向けの最新のIE10デモをご覧ください。Canvasには素晴らしいアニメーションがあります。SVGはそれらに近いことは何もできません。全体的なキャンバスは、すべてのモバイルブラウザで使用できます。SVGはAndroid 2.0-2.3の初期バージョンでは動作しません（私が知っているように）

はい、Canvasはスケーラブルではありませんが、非常に高速なので、ビューポートをスクロールできるブラウザよりも速くキャンバス全体を再描画できます。

私の観点から見ると、Microsoftの最適化は、Canvasを通常のGDIエンジンとして使用し、Windowsのようにグラフィックアプリケーションを実装する手段を提供します。