Latest web development tutorials

SVG 在HTML 中

SVG 文件可通過以下標籤嵌入HTML 文檔:<embed>、<object> 或者<iframe>。

SVG的代碼可以直接嵌入到HTML頁面中,或您可以直接鏈接到SVG文件。


使用<embed> 標籤

<embed>:

  • 優勢:所有主要瀏覽器都支持,並允許使用腳本
  • 缺點:不推薦在HTML4和XHTML中使用(但在HTML5允許)

語法:

<embed src="circle1.svg" type="image/svg+xml" />

結果:


使用<object> 標籤

<object>:

  • 優勢:所有主要瀏覽器都支持,並支持HTML4,XHTML和HTML5標準
  • 缺點:不允許使用腳本。

語法:

<object data="circle1.svg" type="image/svg+xml"></object>

結果:


使用<iframe> 標籤

<iframe>:

  • 優勢:所有主要瀏覽器都支持,並允許使用腳本
  • 缺點:不推薦在HTML4和XHTML中使用(但在HTML5允許)

語法:

<iframe src="circle1.svg"></iframe>

結果:


直接在HTML嵌入SVG代碼

在Firefox、Internet Explorer9、谷歌Chrome和Safari中,你可以直接在HTML嵌入SVG代碼。

注意: SVG不能直接嵌入到Opera。

實例

<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>

嘗試一下»

鏈接到SVG文件

您還可以用<a>標籤鏈接到一個SVG文件:鏈接到SVG文件

您還可以用<a>標籤鏈接到一個SVG文件:

<a href="circle1.svg">View SVG file</a>

結果:

查看SVG文件