如何在您的網頁上放置SVG圖形

SVG或可縮放矢量圖形讓您繪製更複雜的圖像並將它們呈現在網頁上。 但是你不能簡單地把SVG標籤放到你的HTML中。 他們不會出現，你的網頁將無效。 相反，你必須使用三種方法之一。

使用對象標籤嵌入SVG

HTML標記將在您的網頁中嵌入SVG圖形。 您使用數據屬性編寫對象標記以定義要打開的SVG文件。 您還應該包含寬度和高度屬性以定義SVG圖像的寬度和高度（以像素為單位）。

為了實現跨瀏覽器兼容性，您應該包含type屬性，該屬性應為：

類型=“圖像/ SVG + xml”的

以及不支持它的瀏覽器的代碼庫（Internet Explorer 8及更低版本）。 您的代碼庫將指向不支持SVG的瀏覽器的SVG插件。 最常用的插件來自Adobe，網址為http://www.adobe.com/svg/viewer/install/。 但是，這個插件不再受Adobe支持。 另一種選擇是來自Savarese Software Research的Ssrc SVG插件，網址為http://www.savarese.com/software/svgplugin/。

你的對像看起來像這樣：

使用SVG對象的技巧

  • 確保寬度和高度至少與您嵌入的圖像一樣大。 否則，您的圖像可能會被裁剪。
  • 如果您沒有包含正確的內容類型（type =“image / svg + xml”），那麼您的SVG可能無法正確顯示，因此我不建議將其刪除。
  • 對於不顯示SVG文件的瀏覽器，您可以在對象標記內包含回退信息。
  • 您還可以在參數中設置SVG的來源和內容類型。 這在IE 6和7中可能會更好：
classid =“CLSID：1339B54C-3453-11D2-93B9-000000000000”width =“110”height =“60”codebase =“http://www.savarese.com/software/svgplugin/”>

請注意，這需要一個classid來使其工作。

在對象標記示例中查看SVG。

嵌入帶嵌入標籤的SVG

包含SVG的另一個選項是使用標籤。 您可以使用與對象標記幾乎相同的屬性，包括寬度<，高度，類型和代碼庫>。 唯一的區別是，您將SVG文檔URL放在src屬性中，而不是數據。

你的嵌入看起來像這樣：

src =“http://your-domain.here/z-circle.svg”width =“210”height =“210”type =“image / svg + xml”codebase =“http://www.adobe.com / svg / viewer / install“/>

使用嵌入SVG的技巧

  • 嵌入標記無效HTML4，但它是有效的HTML5，因此如果您在HTML4頁面中使用它，則應該記住您的頁面不會進行驗證。
  • 在src屬性中使用完全禁用的域名以獲得最佳兼容性。
  • 還有一些報告稱，將Adobe插件與embed標籤一起使用會使Mozilla版本1.0崩潰到1.4。

在嵌入標記示例中查看SVG。

使用iframe來包含SVG

Iframes是在您的網頁上添加SVG圖像的另一種簡單方法。 它只需要三個屬性：像往常一樣寬和高，src指向SVG文件的位置。

你的iframe看起來像這樣：