在HTML5中使用SVG的方式

這篇文章主要介紹了在HTML5中使用SVG的方式，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

在HTML5中我們可以通過使用<svg>標簽內(nèi)聯(lián)SVG，使用HTML的<img>標簽、<object>標簽、<embed>標簽、<iframe>標簽導入SVG圖像，使用CSS background屬性導入SVG圖像。

SVG是一種矢量圖形格式，可以隨著Web頁面的大小變化重新繪制以適應其尺寸，不會出現(xiàn)任何失真的情況；十分適合在響應式Web設計中使用。本篇文章就給大家具體介紹在HTML5中如何使用SVG，希望對你們有所幫助?！鞠嚓P視頻教程推薦：HTML5教程】

使用HTML5 <svg>標簽內(nèi)聯(lián)SVG

SVG是HTML 5草案規(guī)范的一部分，即<svg>標簽是HTML 5語言的一部分，可以是內(nèi)聯(lián)的。所有主要的瀏覽器品牌（IE9除外）現(xiàn)在都提供非常好的支持度。

注：

1、要使用<svg>標簽內(nèi)聯(lián)SVG，千萬不能忘記在<svg>標簽元素內(nèi)聲明：xmlns="http://www.w3.org/2000/svg"。

2、這只能用于靜態(tài)SVG的導入。

下面是一個簡單的HTML5 SVG示例。

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

效果圖：

使用<img>標簽導入SVG圖像

注：使用<img>標簽只能用于靜態(tài)SVG圖像的導入。

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的綠色圓圈" />

效果圖：

使用<object>標簽導入SVG圖像

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

從技術上講，<object>標簽可用于許多元素，包括SVG文件，如果有不被識別為圖像的元素，在圖像搜索時就不可用。解決方法是使用<img>標記作為后備：

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

使用<embed>標簽導入SVG圖像

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

不怎么建議使用<embed>標簽導入SVG圖像，它不是HTML規(guī)范的一部分，但在主要用于實現(xiàn)Flash插件的所有瀏覽器上得到廣泛支持。

使用<iframe>標簽導入SVG圖像

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

<iframe>標簽導入SVG圖像的方法也不是很建議使用，我們可以使用<object>標簽，因為iframe難以維護，不會被搜索引擎索引，也不利于SEO（搜索引擎優(yōu)化）。

使用CSS背景圖像導入SVG圖像

我們可以使用css background屬性把SVG圖像導入成背景圖片

這相當于使用<img>標簽，并且具有相同的優(yōu)點和缺點。

#id {
  background-image: url(image.svg)  no-repeat;
}

效果圖：

感謝你能夠認真閱讀完這篇文章，希望小編分享在HTML5中使用SVG的方式內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!