
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)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選