SVG可以作為一個獨立的文件存在。但更多的時候，我們希望他能集成在某個更大的文檔中，比如HTML。
將SVG插入到HTML中主要有以下幾種方式：
- 將 SVG 作為圖像導入
- 將 SVG放入 iframe 中導入
- 將 SVG 作為object對象導入
- 使用內聯 SVG
將SVG作為圖像導入
這可能是將SVG導入HTML文檔的最簡單的方法。將.svg文件把它加到一個普通<img>標簽內。
<img src="example.svg" alt="example">
你需要確保你的服務器支持.svg文件，可能大多數都是支持的，但是還是查一下的好。
同時你也可以在CSS中把.svg文件作為一個background-image導入。
注意要加一個備用的.png圖像，以防瀏覽器無法顯示svg。
.svg-bg { background: url("example.png"); /* fallback */ background-image: url("example.svg"); }
不足：
SVG作為圖像引用時，
-
大多數瀏覽器不會加載SVG自身引用的文件(其他圖像，外部腳本，字體文件等)
-
依據瀏覽器的安全策略，SVG中定義的腳本也可能不會執行
使用Object 或 iframe導入SVG圖像
和把SVG作為圖像導入相似，你可以把它作為一個<object>導入，通過data屬性鏈接要導入的.svg文件。注意，MIME type必須是image/svg+xml。代碼如下：
<object type="image/svg+xml" data="example.svg" class="example"> My Example SVG </object>
相比使用<object>，你也可以把.svg文件嵌入到一個<iframe>框架內。代碼如下：
<iframe src="example.svg" class="example"></iframe>
上面2種方法都可以使用CSS控制SVG的樣式，如：
.example { display: block; margin: 5em auto; border-radius: 10px; }
使用內聯SVG
你不必一定把SVG放在一個單獨的文件中，因為你可以直接在HTML中嵌入SVG。
<!DOCTYPE html> <html> <body> <svg> ... </svg> </body> </html>
直接嵌入的SVG會繼承父文檔的樣式，默認情況下采用inline的方式進行顯示。
總結：
SVG並不難使用。尤其，最簡單的是，你可以在一個矢量圖形應用程序中創建一個圖像，然后將圖像導出為一個.svg文件，然后把它放入到一個<img>、<object>或者<iframe>的HTML標簽中。你也可以在CSS文件中放入.svg文件，把它作為一個background-image。
參考文檔：