この記事では、主にSVGの基本概念とSVGとCanvasの違いを紹介し、最後にSVGスケーラブルベクトルグラフィックをよりよく理解できるように全員が促進する簡単な例を示します。みんなにお勧めします。
Baidu Encyclopedia：
SVG Scalable Vector Graphicsは、2次元ベクトルグラフィックを記述する拡張可能なマークアップ言語（XML）に基づくグラフィック形式です。 SVGは、W3Cによって策定された新しい2次元ベクトルグラフィック形式であり、仕様のネットワークベクトルグラフィックスターン標準でもあります。 SVGはXML構文を厳密に追跡し、テキスト形式で説明言語を使用して画像コンテンツを記述するため、画像解像度に依存しないベクトルグラフィック形式です。
SVGとは何ですか？SVGは、スケーラブルベクトルグラフィックス（スケーラブルベクトルグラフィックス）を指します
SVGは、ネットワークのベクトルベースのグラフィックを定義するために使用されます
SVGはXML形式でグラフィックを定義します
SVG画像は、サイズが拡大したり変更されたりしても、グラフィックの品質を失うことはありません。
SVGはWorld Wide Web Allianceの標準です
SVGは、DomやXSLなどのW3C標準を備えた全体です
キャンバスとSVGの違い：SVG
SVGは、XMLを使用して2Dグラフィックを記述する言語です。
SVGはXMLに基づいています。つまり、SVG DOMのすべての要素が利用可能です。 JavaScriptイベントハンドラーを要素に添付できます。
SVGでは、描かれた各図はオブジェクトとして扱われます。 SVGオブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。
特徴：
解像度の依存関係はありません
イベントハンドラーをサポートします
大規模なレンダリングエリアを持つアプリケーションに最適（Googleマップなど）
高い複雑さはレンダリングを遅くすることができます（DOMを過剰に使用するアプリケーションはありません）
ゲームアプリケーションには適していません
キャンバス
Canvasは、JavaScriptを介して2Dグラフィックスを描画します。
キャンバスはピクセルによってピクセルにレンダリングされます。
キャンバスでは、グラフが描画されると、ブラウザの注目を集め続けることはありません。位置が変化した場合、グラフィックスによって上書きされた可能性のあるオブジェクトを含むシーン全体も塗り直す必要があります。
特徴：
解像度に依存します
イベントハンドラーはサポートされていません
弱いテキストレンダリング能力
結果画像を.pngまたは.jpg形式で保存する機能
画像集約型のゲームに最適で、その多くは頻繁に塗装されています
SVGの例：コードをコピーします