HTML5 インライン SVG
HTML5 はインライン SVG をサポートしています。
SVGとは何ですか?
SVGはスケーラブルベクターグラフィックスを指します
SVGはWeb用のベクターベースのグラフィックスを定義するために使用されます
SVGはXML形式を使用してグラフィックスを定義します
SVG画像は拡大されるか、グラフィック品質がサイズを変更しても迷うことはありません
SVG は World Wide Web Consortium の標準です
SVG の利点
他の画像形式 (JPEG や GIF など) と比較して、SVG を使用する利点は次のとおりです。
SVG画像はテキストエディタで作成および変更できます
SVG画像は検索、インデックス付け、スクリプト作成、または圧縮が可能です
SVG画像はスケーラブルです
SVG画像は任意の場所で使用できます同じ解像度で高品質で印刷
SVG は画質を損なうことなく拡大できます
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari インライン SVG のサポート。
HTML ページに SVG を直接埋め込む
HTML5 では、SVG 要素を HTML ページに直接埋め込むことができます:
例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
インスタンスの実行»
オンラインで表示するには、[インスタンスの実行] ボタンをクリックします。例
結果:
申し訳ありませんが、お使いのブラウザはインラインSVGをサポートしていません。SVGチュートリアルの詳細については、SVGチュートリアルをご覧ください。
SVGとCanvasの違い
SVGは、XML A言語を使用するメソッドです。 2Dグラフィックスの説明。
Canvas は JavaScript を通じて 2D グラフィックを描画します。
SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。
SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。
キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが一度描画されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
Canvas と SVG の比較
次の表は、Canvas と SVG の違いの一部を示しています。
| キャンバス | SVG |
|---|---|
|
|
