jQuery SVGとRaphael
私は、SVGとJavaScript/jQueryを使用して対話型インターフェイスに取り組んでおり、 Raphael と jQuery SVG の間で決定しようとしています。知りたい
- 2つの間のトレードオフは何ですか
- 開発の勢いはどこにあるようです。
RaphaelでのVML/IEサポートや、jQuery SVGのプロット機能は必要ありません。私は主に、SVGキャンバス上の個々のアイテムを作成、アニメーション、および操作する最もエレガントな方法に興味があります。
私は最近RaphaelとjQuery SVGの両方を使用しました-私の考えは次のとおりです。
ラファエル
長所：優れたスターターライブラリであり、SVGを使用して多くのことをすばやく実行できます。よく書かれ、文書化されています。たくさんの例とデモ。非常に拡張可能なアーキテクチャ。アニメーションに最適。
短所：は実際のSVGマークアップの上のレイヤーであり、グループ化などのより複雑なことをSVGで行うことを困難にします（セットをサポートしますが、グループ）。既に存在する要素の編集を行っても素晴らしいことはしません。
jQuery SVG
長所：jQueryプラグイン（すでにjQueryを使用している場合）。よく書かれ、文書化されています。多くの例とデモ。ほとんどのSVG要素をサポートし、要素へのネイティブアクセスを簡単に許可します
短所：アーキテクチャはRaphaelほど拡張可能ではありません。 SVG要素の構成など、いくつかのことをより適切に文書化できます。既に存在する要素の編集を行っても素晴らしいことはしません。アニメーションのSVGセマンティクスに依存しています-これはそれほど素晴らしいことではありません。
SnapSVG Raphaelの純粋なSVGバージョンとして
SnapSVGはRaphaelの後継です。 SVG対応ブラウザでのみサポートされ、SVGのほぼすべての機能をサポートします。
結論
あなたが迅速かつ簡単に何かをしているなら、ラファエルは簡単な選択です。もっと複雑なことをするつもりなら、jQuery SVGを使用することにしました。これは、Raphaelを使用するよりも実際のマークアップを大幅に簡単に操作できるためです。また、jQuery以外のソリューションが必要な場合は、SnapSVGが適しています。
後世のために、きれいなAPIと "無料" IEのサポートのために、そして アクティブな開発 が有望に見えるため、Raphaelを選んだことに注意したい（たとえば、イベントサポートは0.7で追加されました）。ただし、質問には回答せず、Javascript + SVGライブラリを使用した他の人の経験についても興味があります。
私はRaphaelの大ファンであり、開発の勢いは強くなっているようです（バージョン0.85は先週リリースされました）。別の大きなプラスは、その開発者 Dmitry Baranovskiy が現在Raphaelチャートプラグイン g.raphael に取り組んでいるということです。 Flickr ）の初期バージョンからの出力のサンプルです。
ただし、別の可能性のある候補をSVGライブラリミックスに投げ込むために、Googleの SVG Web は非常に有望に見えます（私は非SVGでレンダリングするために使用するFlashの大ファンではありませんが）準拠ブラウザ）。おそらく1つ、特に今後の SVGオープン会議 で見るべきものです。
Raphaelのセットアップと使用は間違いなく簡単ですが、Sphaで表現する方法はRaphaelでは不可能であることに注意してください。上記のように、「グループ」はありません。これは、座標変換のレイヤーを実装できないことを意味します。代わりに、使用可能な座標変換は1つだけです。
デザインがネストされた座標変換に依存している場合、Raphaelは最適ではありません。
Oh Raphaelは6月から大きく前進しました。それと連携できる新しいチャートライブラリがあり、これらは非常に目を引くものです。 Raphaelは完全なSVGパス構文もサポートしており、非常に高度なパスメソッドを組み込んでいます。私のサイト（恥知らずのプラグ）で1.2.8+を見て、そこからDmitryのサイトにバウンスします。 http://www.irunmywebsite.com/raphael/raphaelsource.html
まったく無関係ではないと思いますが、キャンバスを検討しましたか？ Process JS のようにすると、より簡単になります。
Svgwebもご覧ください。 IEでsvgをレンダリングするためにフラッシュを使用し、オプションで他のブラウザー（ブラウザー自体よりも多くをサポートする場合）でレンダリングします。
Javascriptの初心者として、Rapahelのサンプルはそれほど簡単ではないことがわかりました。 http://cancerbero.mbarreneche.com/raphaeltut をお勧めします。これは、実際のステップバイチュートリアルです。
IE6/IE7を気にしない人のために、Raphaelを書いたのと同じ男が最新のブラウザ専用のsvgエンジンを構築しました：Snap.svg..優れたドキュメントのある素晴らしいサイトがあります： http://snapsvg.io
snap.svgはすぐに使用でき、既存の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
Raphaelの背後に投票します。クロスブラウザのサポート、クリーンなAPI、一貫した更新（これまでのところ）を使用するのは楽しいことです。 jQueryでも非常にうまく機能します。処理はクールですが、現時点では、最先端のもののデモとしてより便利です。
ご覧になりたい別のsvg javascriptライブラリはd3.jsです。 http://d3js.org/
ここではまだ言及されていないため、 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/
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はそれらに近いものを何もすることができません。全体的なCanvasは、すべてのモバイルブラウザで利用できます。 SVGはAndroid 2.0- 2.3の初期バージョンでは動作していません（私が知っているように）
はい、Canvasはスケーラブルではありませんが、ビューポートをスクロールできるブラウザよりも速くキャンバス全体を再描画できるほど高速です。
私の観点からは、Microsoftの最適化は、Canvasを通常のGDIエンジンとして使用し、現在Windowsで行っているようにグラフィックアプリケーションを実装する手段を提供します。