HTML SVG
HTML5 はインライン SVG をサポートします。
SVGとは何ですか?
SVGは、スケーラブルベクターグラフィックスを指します
SVGは、Web用のベクターベースのグラフィックスを定義するために使用されます
SVGは、XML形式を使用してグラフィックスを定義します
SVG畫像のグラフィック品質(zhì)は、拡大やサイズ変更時に迷わない
SVGはWorld Wide Web Consortiumの標(biāo)準(zhǔn)です
SVGの利點(diǎn)
他の畫像形式（JPEGやGIFなど）と比較して、 SVG を使用する利點(diǎn)は次のとおりです:
SVG 畫像はテキストエディタで作成および変更できます
SVG 畫像は検索、インデックス付け、スクリプト化、または圧縮が可能です
SVG はスケーラブルです
-
SVG 畫像どの解像度でも高品質(zhì)で印刷できます
SVGは畫質(zhì)を損なうことなく拡大できます
ブラウザのサポート
Internet Explorer 9以降、Firefox 、オペラ、Chrome、Safari はインライン SVG をサポートしています。
SVGをHTMLページに直接埋め込みます
HTML5 では、SVG 要素を HTML ページに直接埋め込むことができます: プログラムの実行結(jié)果: SVG チュートリアルの詳細(xì)については、SVG チュートリアルを參照してください。 SVG とその違いCanvas 間 SVG は、XML を使用して 2D グラフィックスを記述する言語です。 Canvas は JavaScript を通じて 2D グラフィックを描畫します。 SVG は XML に基づいています。つまり、SVG DOM 內(nèi)のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。 SVG では、描畫されたすべての形狀がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現(xiàn)できます。 キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが描畫されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全體を再描畫する必要があります。 Canvas と SVG の比較 次の表は、Canvas と SVG の違いの一部を示しています。 解像度に依存 解像度に依存しない サポートされていない イベントハンドラー サポートイベントハンドラー テキストレンダリング機(jī)能が弱い レンダリング領(lǐng)域が大きいアプリケーション(Googleマップなど)に最適 .pngまたは.jpg形式でレンダリングする機(jī)能 結(jié)果を保存畫像 複雑度が高いとレンダリングが遅くなります (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
