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 ページに直接埋め込むことができます: プログラムの実行結果: SVG チュートリアルの詳細については、SVG チュートリアルを参照してください。 SVG とその違いCanvas 間 SVG は、XML を使用して 2D グラフィックスを記述する言語です。 Canvas は JavaScript を通じて 2D グラフィックを描画します。 SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。 SVG では、描画されたすべての形状がオブジェクトとみなされます。 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>
Canvas SVG
