あなたのWebページにSVGグラフィックスを置く方法

オブジェクトをSVGに使用するためのヒント

• 幅と高さが埋め込む画像のサイズ以上であることを確認してください。 そうしないと、画像が切り取られることがあります。
• 正しいコンテンツタイプ（type = "image / svg + xml"）が含まれていないと、SVGが正しく表示されないことがあります。
• SVGファイルを表示しないブラウザの場合、オブジェクトタグ内にフォールバック情報を含めることができます。
• SVGのソースとコンテンツタイプをパラメータで設定することもできます。 これはIE 6と7でうまくいくかもしれません：

これには、動作させるためにclassidが必要であることに注意してください。

オブジェクトタグの例でSVGを表示します。

SVGに埋め込みタグを埋め込む

SVGを含めるための別のオプションは、タグを使用することです。 width <、height、type、codebase>など、オブジェクトタグとほぼ同じ属性を使用します。 唯一の違いは、データの代わりに、SVGドキュメントURLをsrc属性に配置することです。

埋め込みは次のようになります：

SVGに埋め込みを使用するためのヒント

• 埋め込みタグは有効なHTML4ではありませんが、有効なHTML5なので、HTML4ページで使用する場合、ページは検証されません。
• 最良の互換性を得るには、src属性に完全修飾ドメイン名を使用します。
• また、Adobeプラグインで埋め込みタグを使用すると、Mozillaバージョン1.0から1.4にクラッシュするという報告があります。

埋め込みタグの例でSVGを表示します。

iframeを使用してSVGを含める

Iframeは、WebページにSVGイメージを含めるもう1つの簡単な方法です。 通常は幅と高さの3つの属性しか必要とせず、srcはSVGファイルの場所を指しています。

iframeは次のようになります。