HTML 頁面中的 SVG

SVG 文件可經過如下標籤嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。

1>使用 <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。

var svgEmbed = document.getElementById("embed").getSVGDocument();

2>使用 <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。

var svgObject = document.getElementById("object").contentDocument;

3>使用 <iframe> 標籤

<iframe> 標籤可工做在大部分的瀏覽器中。

語法：

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

var svgIframe = document.getElementById("iframe").contentDocument;

程序員的基礎教程：菜鳥程序員