HTML 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 、オペラ、Chrome、Safari はインライン SVG をサポートしています。

SVGをHTMLページに直接埋め込みます

HTML5 では、SVG 要素を HTML ページに直接埋め込むことができます:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<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 とその違いCanvas 間

SVG は、XML を使用して 2D グラフィックスを記述する言語です。

Canvas は JavaScript を通じて 2D グラフィックを描画します。

SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベントハンドラーを要素にアタッチできます。

SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

Canvas と SVG の比較

次の表は、Canvas と SVG の違いの一部を示しています。

Canvas	SVG
解像度に依存	解像度に依存しない
サポートされていないイベントハンドラー	サポートイベントハンドラー
テキストレンダリング機能が弱い	レンダリング領域が大きいアプリケーション(Googleマップなど)に最適

.pngまたは.jpg形式でレンダリングする機能結果を保存画像

複雑度が高いとレンダリングが遅くなります (DOM を過度に使用するアプリケーションは高速ではありません)

多くのオブジェクトが頻繁に使用される画像集約型のゲームに最適です

再描画

ゲームアプリケーションには適していません

学び続ける

||

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <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>

提出するリセットコード
自動運転