SVG Can Zoad Vector Graphics（Scalable Vector Graphics）は、2つの次元ベクトルグラフィックを記述するためのスケーラブルタグ言語（XML）に基づくグラフィック形式です。 SVGは、W3Cによって処方された新しい2次元ベクトルグラフィック形式であり、仕様のネットワークベクトルグラフィックスターン標準でもあります。 SVGは、XMLの構文を厳密に追跡し、テキスト形式の記述言語で画像コンテンツを説明します。
SVGとは何ですか？SVGは、スケーラブルベクトルグラフィックスを指します
SVGは、ネットワーク用のベクトルベースのグラフィックを定義するために使用されます
SVGはXML形式を使用してグラフィックを定義します
SVG画像は、サイズをズームまたは変更してもグラフィックの品質を失うことはありません
SVGは、WANWEIネットワークアライアンスの標準です
DomやXSLなどのSVGおよびW3C標準は全体です
キャンバスとSVGの違い： SVGSVGは、XMLの2Dグラフィックを記述する言語です。
SVGはXMLに基づいています。つまり、SVG DOMの各要素が利用可能です。 JavaScriptイベントプロセッサを特定の要素に追加できます。
SVGでは、各描画グラフィックはオブジェクトと見なされます。 SVGオブジェクトの属性が変更された場合、ブラウザはグラフィックを自動的に再現できます。
特徴：
非依存解像度
サポートイベントプロセッサ
大きなレンダリングエリア（Googleマップなど）を備えた最も適切なアプリケーション
高い複雑さはレンダリングの減速（過度のDOMの適用は高速ではありません）を遅くします）
ゲームアプリケーションには適していません
キャンバスCanvasは、JavaScriptを介して2Dグラフィックスを描画します。
キャンバスはピクセルでレンダリングされます。
キャンバスでは、グラフィックが描画されると、ブラウザの注目を集め続けることはありません。場所が変更された場合、グラフィックスでカバーされている可能性のあるオブジェクトを含め、シーン全体を再起動する必要があります。
特徴：
依存関係
イベントプロセッサをサポートしないでください
弱いテキストレンダリング能力
結果画像を.pngまたは.jpg形式で保存できます
最も適切なゲーム - 集中的なゲーム、それらの多くは頻繁に塗装されます
簡単な例：
<SVG幅= 100％高さ= 100％> <円cx = 300 Cy = 60 r = 50ストローク=＃ff0ストロークウィッド= 3 fill = red /> < /svg>ビット図とベクトル図
過去には、JPEG、GIFなどのブラウザに表示されたグラフィックはすべてグラフィックスに基づいています。グレーティング画像では、画像ファイルは画像内の各ピクセルの色値を定義します。ブラウザはこれらの値を読み取り、対応するアクションを作成する必要があります。この画像には強い繁殖能力がありますが、場合によっては不十分に見えます。たとえば、ブラウザがさまざまなサイズで表示されると、通常、ブラウザは元の画像に存在しないピクセルの値を挿入または推測する必要があります。さらに、ビットマップのアニメーションは、ローリングブックの種類を生成するアニメーションに限定されています。つまり、個別の画像をすばやく継続的に表示します。
ベクトル図は、指定された値自体ではなく、各ピクセル値に必要な命令を決定するために指定されており、これらの困難の一部を克服します。たとえば、ベクトルグラフィックスは1インチの直径のピクセル値を提供しなくなりましたが、ブラウザに直径1インチの円を作成するように指示し、ブラウザ（またはプラグイン）に残りを実行させます。これにより、ブラウザが円を描く必要があることを知っている限り、ベクターグラフィックスの多くの制限を排除します。画像を通常のサイズの3倍に表示する必要がある場合、グレーティング画像の共通挿入方法を実行することなく、正しいサイズに応じて円を描くためにブラウザを使用します。同様に、ブラウザが受け取った命令は、外部の情報源（アプリケーションやデータベースなど）に簡単になります
HTMLシステムでは、最も一般的に使用されるベクトル化テクノロジーは、SVGおよびHTML5新しく追加されたキャンバス要素です。どちらのテクノロジーも、ベクターマップとグレーティングの描画をサポートしています。
SVGの概要スケーリングベクトルグラフィックス（SVG（SVG）は、2次元グラフィックス（SVGはXML構文に厳密に従う）を記述する言語です。 SVGでは、ベクトルグラフィックス（線形と曲線で構成されたパスなど）、画像、テキストの3つのタイプのグラフィックオブジェクトを許可します。 グラフィックオブジェクト（テキストを含む）は、以前に提示されたオブジェクトに梱包、様式化、変換され、組み合わせることができます。 SVG関数セットには、ネストされた変換、せん断パス、アルファマスク、テンプレートオブジェクトが含まれます。
SVG図面はインタラクティブでダイナミックです。 たとえば、スクリプトを使用してアニメーションを定義およびトリガーすることができます。これはフラッシュに比べて非常に強力です。 Flashはバイナリファイルであり、作成および変更がより困難です。 SVGはテキストファイルであり、動的操作は非常に簡単です。さらに、SVGは、動作に非常に便利なアニメーションを完了するために関連する要素を直接提供します。
SVGは他のWeb標準と互換性があり、Document Object Model Domを直接サポートしています。これはHTML5のキャンバスと比較して非常に強力です（ここでは、SVGは同様のキャンバスを使用してSVGグラフィックスを表示します。多くの機能は、HTML5のキャンバスに少し似ていることがわかります。 SVGのキャンバスであると明確に述べられていません。HTML5のキャンバス要素を指します）。したがって、スクリプトを使用して、SVGの多くの高度なアプリケーションを実現するのが便利です。また、SVGのグラフィック要素は、基本的にDOMの標準イベントをサポートしています。多数のイベント処理プログラム（オンマウスオーバーやオンクリックなど）は、任意のSVGグラフィックオブジェクトに割り当てることができます。 SVGのレンダリング速度は、Canvas要素ほど良くありませんが、この利点は速度の不利な点を完全に補うことができます。
SVGは、プロトコルまたは言語であると言えます。
SVGはHTML5のものではありませんが、ページ上の技術的な手法の1つでもあり、このトピックに掲載しましょう。
SVGおよびその他の画像形式の比較他の画像形式と比較して、SVGには多くの利点があります（ベクターマップの利点から多くの利点があります）：
•SVGファイルは純粋なXMLであり、多くのツール（メモ帳など）で読み取って変更できます。
•JPEGおよびGIF画像と比較して、SVGはより小さく、より圧縮されています。
•SVGはスケーラブルであり、画質を低下させると拡大できます。
•SVG画像のテキストはオプションであり、利用可能です（マップの作成に適しています）。
•SVGはJavaテクノロジーで実行できます。
•SVGはオープン性の標準です。
SVGとフラッシュの比較SVGの主な競合他社はFlashです。 Flashと比較して、SVGの最大の利点は、他の標準（XSLやDOMなど）と互換性があり、操作に便利であることですが、Flashは人気のないプライベートテクノロジーです。ストレージ形式やダイナミックグラフィックスなど、その他のSVGも大きな利点を占めています。
SVGプレゼンテーション方法HTML5とSVGをサポートするブラウザは、基本的に議論の焦点ではありません。 SVGを直接サポートするブラウザの場合、SVGは主に2つの側面と2つの方法を使用します。
HTMLへのインナーユナイテッド
SVGは標準のHTML要素であり、以下の例を参照してください。
<？XMLバージョン= 1.0エンコード= UTF-8？> < - > <title>私の最初のSVGページ</title> </head> <body> <svg xmlns = http://www.w3.org/2000/SVGバージョン= 1.1幅= 200px高さ= 200px> <st> x = 0 y = 0幅= 100％高さ= 100％fill = black/> <circe = 100 cy = 100 r = 50スタイル：赤;/> </svg> </svg > < /body> < /html>
最初のXMLステートメントの開始と、主にこれらの部分の問題を考慮して、SVG、XMLNS、バージョンバージョンなどの名前スペースは基本的に書かれていることに注意してください
独立したSVGファイル
独立したSVGとは、SVGファイル拡張子を拡張することにより、ベクトルグラフィカルファイル形式の提供を指します。このSVGファイルは、ブラウザに埋め込まれています。
1.独立したSVGファイル/ページ、定義されたテンプレートは基本的に次のようになります。
<svg幅= 100％高さ= 100％> <！ - svgマークアップはこちら - > </svg>
そのようなテキストファイルは、sun.svgなどの拡張機能としてSVGを持つファイルに保存します。
2.HTML外部SVGファイルを参照します。
オブジェクトまたはIMG要素を使用して、SVGグラフィックスを埋め込みました。たとえば、次の例：
<！doctype html> <html> <head> <title>私の最初のsvgページ</head> </head> <blect data = sun.svgタイプ= image/svg+xml width = 300px> <！ - ここにフォールバックコードを実装するか、メッセージを表示します： - > <p>ブラウザは最新のブラウザへのアップグレードをご覧ください。 = 10幅= 30高さ= 30ストローク=ブラックフィル=透明なストローク幅= 5/> <rad = 10 rx = 10 width = 30 height = 30 troke = black fill =透明なストローク幅= 5/> <円cx = 25 Cy = 75 r = 20ストローク=赤い充填=透明なストローク幅= 5/> <Ellipse CX = 75 Rx = 20 Ry = 5 s Troke = Red Fill =透明なストローク幅= 5/> <行X1 = 10 x2 = 50 y1 = 110 y2 = 150ストローク=オレンジフィル=透明なストローク幅= 5/> <ポリラインポイント= 6 0 110 65 120 70 =透明なストローク幅= 5/> <ポリゴンポイント= 50 160 55 180 60 65 205 305 205 40 180 45 18 0ストローク=緑=緑色=透明なストローク幅= 5/> <パスD = M20、230 Q40、205 50、230 T90、230 fill = none stroke = blue stroke-width = 5/svg>
この例は、通常の長方形、丸い角を備えた長方形、丸い、楕円形、ストレート、折り畳み、ポリゴン、パスなど、多くの形を描きます。これらは基本的なグラフィック要素です。グラフィックを描画するには多くの方法がありますが、長方形は長方形で実装したり、パスで実装できますが、SVGのコンテンツを短くてスマートで読みやすく保つようにしてください。