站長資訊網在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; }
效果圖：
總結：
