モスクワ地下鉄の地図。 SVGバージョン

dbcartajsブラウザー用の動的ベクトル（座標による）マップの開発のトピックを続けます。 新しいバージョン（v2）では、オブジェクトのレンダリングをキャンバスからSVGに切り替えました。 また、いくつかの例、特にモスクワの地下鉄の地図を再編集しました。 地図のキャンバスバージョンに関する私の投稿で 、私はそれをウィキペディアからのsvgバージョンと比較しました。ダウンロード速度はキャンバスでより高速でした。 しかし、プロジェクトの新しいバージョンでsvg-handlerを使用してマップを再生すると、ダウンロード速度がおそらくSVGに比べてCanvasの唯一の利点であることがわかりました。







まず、svgで作成するコードが少なくて済みました。



第二に、コード作成のシンプルさと利便性。 svgでは、個々のオブジェクト、それらのプロパティ、およびメソッドに基づいてロジックが構築されます。 たとえば、カーソルの下にオブジェクトを定義するには、このオブジェクト（地下鉄駅の円）のイベントハンドラーを作成する必要があります。イベントハンドラーでは、プロパティを変更できます-色、スケール（スケールメソッドはKhodynskoye Pole駅アイコンに使用されます）などキャンバスレンダリングロジックは、マップ全体の再描画に基づいています。 また、個々のオブジェクトを強調表示するには、マップ全体を再描画および拡大縮小する必要があります。 さらに、キャンバスはメモリにレンダリングされたオブジェクトを保存せず、変数（mfloodオブジェクトのdbcartajs内）に個別に保存する必要があり、自分で監視（追加、削除）する必要があります。 SVG画像は、レンダリングされたオブジェクトをDOMモデルに保存し、直接アクセスできます。



第三に、svgの可能性はキャンバスよりもはるかに多く、たとえば、アニメーション、画像のフィルターです。



第四に、ブラウザの互換性。 SVGはそれをより高くしています。 SVGに問題はありませんでした。 キャンバスでは、Firefox 3.x以降の一部のプロパティの動作が異なります（たとえば、setDashLine、isPointInPath）。 バージョン9までのInternet Explorerおよびバージョン4までのSafariは、キャンバスをまったくサポートしていませんでした。



svgとcanvasはどちらも、完成した画像（png、jpeg）を操作できます。 確かに、キャンバスのみがピクセル単位でアクセスできます。 そして、これは、レンダリング速度と同様に、おそらくその主な機能です。



一般的に、興味のある方はegaxegax.github.ioの例を参照してください 。