HTML の SVG
SVG ファイルは、<embed>、<object>、または <iframe> のタグを使用して HTML ドキュメントに埋め込むことができます。
SVG のコードは HTML ページに直接埋め込むことも、SVG ファイルに直接リンクすることもできます。
<embed> タグを使用します
<embed>:
利点: すべての主要なブラウザでサポートされ、スクリプトを使用できます
欠点: HTML4 および XHTML での使用は推奨されません (ただし、HTML5 では使用できます) )
構文:
<embed src="circle1.svg" type="image/svg+xml" />
結果:
Use <object> ;タグ
<object>:
長所: すべての主要なブラウザでサポートされ、HTML4、XHTML、および HTML5 標準をサポートします。
短所: スクリプトは許可されません。
構文:
<オブジェクトデータ="circle1.svg"
type="image/svg+xml"></object>
結果:
<iframe> タグを使用
<iframe>:
利点: すべての主要なブラウザをサポート、スクリプトの使用が許可されます
欠点: HTML4 および ;/iframe> での使用は推奨されません
結果:
SVG コードを HTML に直接埋め込みます Firefox、Internet Explorer 9、Google Chrome と Safari では、SVG コードを HTML に直接埋め込むことができます。
注: SVG を Opera に直接埋め込むことはできません。
インスタンス
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します<a href="circle1.svg"> SVG ファイルを表示する</a>結果: SVG ファイルを表示
