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