HTML5 インライン SVG

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 画像はテキストエディタで作成および変更できます

SVG 画像は検索、インデックス付け、スクリプト作成、または圧縮が可能

SVGはスケーラブルです

SVG画像は任意の解像度で編集できます高品質で印刷できます

SVGは画質を損なうことなく拡大できます

基本的にすべてのブラウザがSVGをサポートしています、もちろんIEは9以降です。

例:

<!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形式で保存する機能
多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適です

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body> </html>

提出するリセットコード

自動運転