html網頁引入svg圖片的4種方式

web應用開發使用svg圖片，總結了下，可以有如下4種方式：

1. 直接插入頁面。
2. img標簽引入。
3. css引入。
4. object標簽引入。

1. 直接插入頁面

在html頁面，可以直接使用svg標簽。

運行效果：

2. img標簽引入

除了在網頁里直接寫svg標簽，也可以通過img引入，就像引入jpeg、png圖片一樣。

1）新建svg圖片

那么我們就要先新建一個svg圖片文件，我們把上面直接寫在網頁里的svg拿來用：

這邊內容有兩點不一樣：

1. 需要聲明命名空間 xmlns 這個屬性，命名空間可以本文尾部列出的參考資料。
2. 移除了原先寫在 svg 標簽上的樣式，style="border: 1px solid steelblue"。

把內容保存到test.svg文件，這個就是一張圖片文件了，可以嘗試在瀏覽器打開看看。

2）使用img標簽引入

假設test.svg和網頁文件在同一個目錄下：

和引入jpeg、png類似，直接src屬性設置圖片路徑即可，另外我們把原先在svg的樣式移到了img標簽這邊。

運行效果和上面是一樣的：

現在網上有很多svg做的圖片，可以參考：https://www.iconfont.cn，一個不錯的icon圖標網站。

3. css引入

css引入就是把圖片當成背景圖引入：

4. object引入

和img引入類似，需要一個svg文件，然后用屬性data引入：

運行效果和上面類似，就不再貼圖。

其他標簽

其他標簽如：embed、iframe標簽雖然也可以引入，但是不推薦使用了，詳情可以參考本文尾部列出的參考資料。