---

前言

web應用開發使用svg圖片的方式，有如下幾種方式
1、直接在頁面編寫svg
2、使用img標簽引入
3、通過css引入
4、使用object標簽引入

---

直接在頁面編寫svg

在html頁面直接使用svg標簽編寫。

<svg width="230" height="230" style="border: 1px solid steelblue;"><!-- 里面有一個矩形 --><rect x="5" y="5" width="220" height="220" fill="skyblue"></rect>
</svg>

---

---

使用img標簽引入

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

---

1、新建svg圖片文件

新建一個svg圖片文件，文件名稱為test.svg
這邊內容有兩點不一樣
1)需要聲明命名空間xmlns這個屬性，在本文最后會列出命名空間的參考資料。
2)移除了原先寫在svg標簽上的樣式，style="border: 1px solid steelblue"。

<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230"><rect x="5" y="5" width="220" height="220" fill="skyblue"></rect>
</svg>

---

2、使用img標簽引入

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

<img src="test.svg" style="border: 1px solid steelblue;" />
<img src="test.svg" style="width: 100px; height: 100px;border: 1px solid steelblue;" alt="SVG Image" />

和引入jpeg、png類似，直接src屬性設置圖片路徑即可，另外原先在svg的樣式移到了img標簽上。
img引入的svg設置寬高不會被裁剪，而是等比縮放。
阿里巴巴尺量圖庫是一個不錯的icon圖標網站。

---

---

通過css引入

css引入就是把圖片當成背景圖引入
必須設置寬高哦，否則沒有效果

<div style="width: 230px; height: 230px; border: 1px solid steelblue; background-image: url(test.svg);"></div>

---

---

使用object標簽引入

object標簽引入和img引入類似，需要一個svg文件，文件綁定在data屬性上。
運行效果和上面類似，就不再貼圖。

<object data="test.svg" style="border: 1px solid steelblue;"></object>

---

其他標簽

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

---

參考資料

1、命名空間
2、embed標簽
3、iframe標簽