SVG是一種矢量圖形格式，可以隨著Web頁面的大小變化重新繪制以適應(yīng)其尺寸，不會出現(xiàn)任何失真的情況；十分適合在響應(yīng)式Web設(shè)計(jì)中使用。本篇文章就給大家具體介紹在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)入。

下面是一個(gè)簡單的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文件，如果有不被識別為圖像的元素，在圖像搜索時(shí)就不可用。解決方法是使用 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ī)范的一部分，但在主要用于實(shí)現(xiàn)Flash插件的所有瀏覽器上得到廣泛支持。

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

 iframe src= image.svg /iframe 

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

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

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

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

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

效果圖：

總結(jié)：以上就是本篇文章的全部內(nèi)容，希望能對大家的學(xué)習(xí)有所幫助。

以上就是如何在HTML5中使用SVG的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。