web應用程式開發使用svg圖片，總結了下，可以有以下4種方式：
1. 直接插入頁面。 2. img標籤引入。 3. css引入。 4. object標籤引入。
在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>
運行效果：
除了在網頁裡直接寫svg標籤，也可以透過img引入，就像引入jpeg、png圖片一樣。
1）新建svg圖片
那我們就要先新建一個svg圖片文件，我們把上面直接寫在網頁裡的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和網頁檔案在同一個目錄下：
<img src="test.svg" style="border: 1px solid steelblue" />
和引入jpeg、png類似，直接src屬性設定圖片路徑即可，另外我們把原先在svg的樣式移到了img標籤這邊。
運行效果和上面是一樣的：
現在網路上有很多svg做的圖片，可以參考：https://www.iconfont.cn，一個不錯的icon圖示網站。
css引入就是把圖片當成背景圖引入：
<style type="text/css">
.svg {
width: 200px;
height: 150px;
border: 1px solid steelblue;
background-image: url(test.svg); // 當成背景引入 }
</style>
<div class="svg"></div>
和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
iframe標籤：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
到此這篇關於html網頁引入svg圖片的4種方式的文章就介紹到這了,更多相關html引入svg圖片內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支援downcodes.com！