html網(wǎng)頁(yè)引入svg圖片的4種方式
我要評(píng)論web應(yīng)用開(kāi)發(fā)使用svg圖片，總結(jié)了下，可以有如下4種方式：
1. 直接插入頁(yè)面。
2. img標(biāo)簽引入。
3. css引入。
4. object標(biāo)簽引入。
1. 直接插入頁(yè)面
在html頁(yè)面，可以直接使用svg標(biāo)簽。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 一個(gè)svg圖片 --> <svg width="200" height="150" style="border: 1px solid steelblue"> <!-- 里面有一個(gè)矩形 --> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg> </body> </html>
運(yùn)行效果：
2. img標(biāo)簽引入
除了在網(wǎng)頁(yè)里直接寫(xiě)svg標(biāo)簽，也可以通過(guò)img引入，就像引入jpeg、png圖片一樣。
1）新建svg圖片
那么我們就要先新建一個(gè)svg圖片文件，我們把上面直接寫(xiě)在網(wǎng)頁(yè)里的svg拿來(lái)用：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg>
這邊內(nèi)容有兩點(diǎn)不一樣：
1. 需要聲明命名空間 xmlns 這個(gè)屬性，命名空間可以本文尾部列出的參考資料。
2. 移除了原先寫(xiě)在 svg 標(biāo)簽上的樣式，style="border: 1px solid steelblue"。
把內(nèi)容保存到test.svg文件，這個(gè)就是一張圖片文件了，可以嘗試在瀏覽器打開(kāi)看看。
2）使用img標(biāo)簽引入
假設(shè)test.svg和網(wǎng)頁(yè)文件在同一個(gè)目錄下：
<img src="test.svg" style="border: 1px solid steelblue" />
和引入jpeg、png類(lèi)似，直接src屬性設(shè)置圖片路徑即可，另外我們把原先在svg的樣式移到了img標(biāo)簽這邊。
運(yùn)行效果和上面是一樣的：
現(xiàn)在網(wǎng)上有很多svg做的圖片，可以參考：https://www.iconfont.cn，一個(gè)不錯(cuò)的icon圖標(biāo)網(wǎng)站。
3. css引入
css引入就是把圖片當(dāng)成背景圖引入：
<style type="text/css">
.svg {
width: 200px;
height: 150px;
border: 1px solid steelblue;
background-image: url(test.svg); // 當(dāng)成背景引入
}
</style>
<div class="svg"></div>
4. object引入
和img引入類(lèi)似，需要一個(gè)svg文件，然后用屬性data引入：
<object data="test.svg" style="border: 1px solid steelblue"></object>
運(yùn)行效果和上面類(lèi)似，就不再貼圖。
其他標(biāo)簽
其他標(biāo)簽如：embed、iframe標(biāo)簽雖然也可以引入，但是不推薦使用了，詳情可以參考本文尾部列出的參考資料。
參考資料
命名空間：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course
embed標(biāo)簽：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed
iframe標(biāo)簽：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
到此這篇關(guān)于html網(wǎng)頁(yè)引入svg圖片的4種方式的文章就介紹到這了,更多相關(guān)html引入svg圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
將SVG圖引入到HTML頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了將SVG圖引入到HTML頁(yè)面的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2019-09-20css中引入svg來(lái)兼容部分安卓機(jī)顯示0.5px邊框的示例
這篇文章主要介紹了css中引入svg來(lái)兼容部分安卓機(jī)顯示0.5px邊框的示例的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-22
