SVG Scalable Vector Graphicsは、2次元のベクターグラフィックスを記述するためのExtensible Markup Language (XML)に基づくグラフィックス形式です。 SVG は、W3C によって開発された新しい 2 次元ベクター グラフィックス形式であり、仕様のネットワーク ベクター グラフィックス標準でもあります。 SVG は XML 構文に厳密に従い、テキスト形式の記述言語を使用して画像コンテンツを記述します。したがって、SVG は画像解像度に依存しないベクトル グラフィック形式です。
SVGとは何ですか?
SVGはScalable Vector Graphicsの略です
SVGはWeb用のベクターベースのグラフィックを定義するために使用されます
SVGはXML形式を使用してグラフィックを定義します
SVG画像は拡大したりサイズを変更するとグラフィック品質が低下します 損失が発生します
SVG World Wide Web Consortium の標準です
SVG は DOM などの W3C 標準と統合されており、利点は次のとおりです:
SVG 画像はテキスト エディタで作成および変更できます
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="black" /> </svg> </body> </html>
Canvas と SVG の違い: SVG は、XML を使用して 2D グラフィックスを記述する言語です。 SVGはXMLに基づいています。つまり、SVG DOM内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。 SVGでは、描かれたそれぞれの形状はオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。 特徴： 解像度に依存しない
イベントハンドラーのサポート
大きなレンダリング領域を持つアプリケーション（Google Mapsなど）に最適
複雑さが高いとレンダリング速度が遅くなります（DOMを過剰に使用するアプリケーションは速くありません）
いいえゲームアプリケーションに適しています
Canvas
CanvasはJavaScriptを通じて2Dグラフィックスを描画します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、一度グラフィックが描画されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
特徴:
解像度に依存します
イベントハンドラーはサポートされません
弱いテキストレンダリング機能
結果画像を.pngまたは.jpg形式で保存する機能
多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適です
次のセクション
