HTML5 インライン SVG
SVG Scalable Vector Graphicsは、2次元のベクターグラフィックスを記述するためのExtensible Markup Language (XML)に基づくグラフィックス形式です。 SVG は、W3C によって開発された新しい 2 次元ベクター グラフィックス形式であり、仕様のネットワーク ベクター グラフィックス標準でもあります。 SVG は XML 構(gòu)文に厳密に従い、テキスト形式の記述言語を使用して畫像コンテンツを記述します。したがって、SVG は畫像解像度に依存しないベクトル グラフィック形式です。
SVGとは何ですか?
SVGはScalable Vector Graphicsの略です
SVGはWeb用のベクターベースのグラフィックを定義するために使用されます
SVGはXML形式を使用してグラフィックを定義します
SVG畫像は拡大したりサイズを変更するとグラフィック品質(zhì)が低下します 損失が発生します
SVG World Wide Web Consortium の標準です
SVG は DOM などの W3C 標準と統(tǒng)合されており、利點は次のとおりです:
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內(nèi)のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。 SVGでは、描かれたそれぞれの形狀はオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現(xiàn)できます。 特徴： 解像度に依存しない
イベントハンドラーのサポート
大きなレンダリング領(lǐng)域を持つアプリケーション（Google Mapsなど）に最適
複雑さが高いとレンダリング速度が遅くなります（DOMを過剰に使用するアプリケーションは速くありません）
いいえゲームアプリケーションに適しています
Canvas
CanvasはJavaScriptを通じて2Dグラフィックスを描畫します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、一度グラフィックが描畫されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全體を再描畫する必要があります。
特徴:
解像度に依存します
イベントハンドラーはサポートされません
弱いテキストレンダリング機能
結(jié)果畫像を.pngまたは.jpg形式で保存する機能
多くのオブジェクトが頻繁に再描畫されるグラフィックスを多用するゲームに最適です
