html5 svg 学習ガイド - SVG の基礎_html5 チュートリアルのスキル

百度百科事典:

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 や XSL などの W3C 標準の不可欠な部分です

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

svg の例:

コードをコピー

コードは次のとおりです: