最佳的方式將SVG內容中的HTML

Question

從我的研究，我理解有三種方式將一個SVG文件中的HTML：

使用嵌入：

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

使用物體：

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

使用IFRAME：

<iframe src="plot1.svg" width="500" height="320"> </iframe> 

我已經在試驗檯上所有三個（試行Django的內置開發服務器，渲染Firefox 3.6中的頁面）。在這種明顯無菌的環境下，我沒有注意到三者之間的任何區別 - w/r/t性能或分辨率。

我的問題是其中之一是否比其他兩個更好，如果是這樣，哪一個。當然，答案可能取決於事實，我已經試圖限制到什麼是相關的：

我們經常顯示在我們的網站，通常是對一些用戶操作創建的數據（例如，時間序列）;根據用戶操作，調用一個數據庫，返回的數據被壓縮併發送到繪圖引擎，繪製引擎呈現靜態圖像，然後嵌入頁面 - 非常標準的東西。

這工作得很好，但我想一些互動功能添加到這些圖表（例如，工具提示超鏈接軸標籤，突出一組點的瓦特/繪圖）。一些圖表相當複雜（例如，多面板調節），我還沒有找到包含這些功能的JavaScript圖表庫。我最終解決上使用相同的繪製庫（晶格中的R），但在繪製每SVG圖表，然後在後處理步驟，其基本上由其中直接操縱XML JavaScript函數添加的用戶交互的功能。

Answer 1

<embed>我一般會避免。它在HTML4中不推薦使用，不允許正確的回退內容，並且在IE中遇到了一些問題。

<object>將允許您包括不支持SVG瀏覽器後備HTML內容。 將回退到提示您下載.svg文件。哪一個最好可能取決於應用程序。

對於現代瀏覽器（包括來自版本9的IE），另一種替代方法是將您的網頁作爲application/xhtml+html提供，並將SVG元素包含在頁面本身中。

Answer 2

對我來說，最好的辦法就是這個

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <image x="0" y="0" height="60" width="60" xlink:href="huge-red-circle.svg" /> 
</svg> 

You can see the example here

來源：http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial