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

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

使用HTML5 <svg>標簽內聯SVG

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

注：

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

2、這只能用于靜態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>標簽只能用于靜態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規范的一部分，但在主要用于實現Flash插件的所有瀏覽器上得到廣泛支持。

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

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

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

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

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

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

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

效果圖：

總結：