HTML5インラインSVG
HTML5は、インラインSVGをサポートしています。
SVGとは何ですか？
- SVGスケーラブルベクターグラフィックス手段（スケーラブルベクターグラフィックス）
- ベクトルベースのネットワークを定義するために使用されるグラフィックスのSVG
- SVGは、XML形式の定義グラフィックスを使用して
- SVG画像を拡大したり、その画像品質の大きさの変化が失われることはありません
- SVGは、標準のWorld Wide Webコンソーシアムであります
SVGの利点
SVGの利点を使用して（例えば、JPEGやGIFなど）他の画像形式と比較して：
- SVG画像は、テキストエディタを使用して作成され、変更することができ
- SVG画像は、検索インデックス付け、スクリプトまたは圧縮することができます
- SVGはスケーラブルであります
- SVG画像は、任意の高品質の解像度で印刷することができ
- SVGは低下しない画像品質に誇張されてもよいです
ブラウザのサポート
Internet Explorerの9+、Firefoxの、オペラ、クロム、およびSafariのサポートインラインSVG。
HTMLページに直接埋め込むSVG
HTML5では、HTMLページに直接要素をSVGすることができるようになります：
例
<!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>
<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のチュートリアルを 。
2間のSVGやキャンバスの違い
SVGは、XML記述言語を使用して2Dグラフィックスです。
JavaScriptを使用して2Dグラフィックスを描画するキャンバス。
SVG SVG DOMの各要素が利用可能であることを意味し、XMLに基づきます。 あなたは、要素として、JavaScriptのイベントプロセッサを取り付けることができます。
SVGにおいて、各グラフィックオブジェクトを描画するものとみなさ。 プロパティSVGオブジェクトが変更された場合、ブラウザが自動的にグラフィックスを再現することができます。
キャンバスは、画素毎にレンダリングされます。 描かれたグラフィックが完了すると、キャンバスで、それはブラウザの注目であることが続行されません。 位置が変更された場合、シーン全体はまた、グラフィックスで覆われていてもよい、任意のオブジェクトを含む、再描画する必要があります。
SVGやキャンバスの比較
次の表は、キャンバスとSVGとの相違点をいくつか示します。
| Canvas | SVG |
|---|---|
|
|