HTMLページ内のSVG

SVGファイルは以下のタグを使用してHTMLドキュメントに埋め込むことができます：<embed>、<object>または<iframe>。

HTMLページ内のSVG

以下では、SVGファイルをHTMLページに埋め込む3つの異なる方法を見てみます。

<embed>タグを使用する

<embed>タグはすべての主要ブラウザがサポートし、スクリプトの使用を許可しています。

注釈：HTMLページにSVGを埋め込む際には<embed>タグを使用することはAdobe SVG Viewerが推奨しています。しかし、合法的なXHTMLを作成する必要がある場合、<embed>タグを使用することはできません。HTMLのどの規範にも<embed>タグはありません。

文法：

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

注釈：pluginspage属性はプラグインのダウンロードURLを指します。

<object>タグを使用する

<object>タグはHTML 4の標準タグで、すべての新しいブラウザがサポートしています。欠点はスクリプトを使用できないことです。

注釈：もし最新バージョンのAdobe SVG Viewerをインストールしていても、<object>タグを使用するとSVGファイルが動作しません（少なくともIEでは動作しません）！

文法：

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

注釈：codebase属性はプラグインのダウンロードURLを指します。

<iframe>タグの使用方法

<iframe>タグはほとんどのブラウザで動作します。

文法：

<iframe src="rect.svg" width="300" height="100">
</iframe>

私は期待しています...

SVGのネームスペースを参照するだけで、SVG要素をHTMLコードに追加できるなら、それは素晴らしいことです。こんな感じです：

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black">
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>