如何在HTML5中使用SVG

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

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

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

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

注：

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

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

下面是一個簡單的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>標(biāo)簽導(dǎo)入SVG圖像

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

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

效果圖：

使用<object>標(biāo)簽導(dǎo)入SVG圖像

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

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

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

使用<embed>標(biāo)簽導(dǎo)入SVG圖像

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

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

使用<iframe>標(biāo)簽導(dǎo)入SVG圖像

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

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

使用CSS背景圖像導(dǎo)入SVG圖像

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

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

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

效果圖：

總結(jié)：