HTML5実践～SVGの詳細解説

Baidu Encyclopedia:

SVG スケーラブル ベクター グラフィックス (Scalable Vector Graphics) は、2 次元のベクター グラフィックスを記述するために使用される、拡張マークアップ言語 (XML) に基づくグラフィックス形式です。 SVG は、W3C によって開発された新しい 2 次元ベクター グラフィックス形式であり、仕様のネットワーク ベクター グラフィックス標準でもあります。 SVG は XML 構文に厳密に従い、テキスト形式の記述言語を使用して画像コンテンツを記述します。したがって、SVG は画像解像度に依存しないベクトル グラフィック形式です。

SVGとは何ですか? SVGはScalable Vector Graphicsの略です

SVGはXML形式を使用してグラフィックを定義します
SVG画像は拡大したりサイズを変更するとグラフィック品質が低下します 損失があります
SVG SVGはWorld Wide Web Consortiumの標準です
SVGはDOMや2Dグラフィックスの言語などのW3C標準をまとめたものです。
SVGはXMLに基づいています。つまり、SVG DOM内のすべての要素が利用可能です。
JavaScript

イベント ハンドラー を要素に添付できます。 SVGでは、描かれたそれぞれの形状はオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。 特徴： 解像度に依存しない イベントハンドラーのサポート 大きなレンダリング領域を持つアプリケーション（Google Mapsなど）に最適
複雑さが高いとレンダリング速度が遅くなります（DOMを過剰に使用するアプリケーションは速くありません）
いいえゲームアプリケーションに適しています
Canvas CanvasはJavaScriptを通じて2Dグラフィックスを描画します。 キャンバスはピクセルごとにレンダリングされます。 キャンバスでは、一度グラフィックが描画されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。 特徴:
解像度に依存します
イベントハンドラーはサポートされません
テキストレンダリング機能が弱い
結果画像を.pngまたは.jpg形式で保存する機能
多くのオブジェクトが頻繁に再描画されるような、画像を多用するゲームに最適です



svg の例:

    <svg width="100%" height="100%"  >

        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />

    </svg>

以上がHTML5実践～SVGの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。