轉自 https://www.cnblogs.com/lxg0/p/7766531.html
https://www.runoob.com/svg/svg-inhtml.html
你有N種理由使用SVG在頁面中展示圖像，
如它的矢量特性、廣泛的瀏覽器支持、比JPEG和PNG更小的體積、可用CSS設置外觀、使用DOM API操作以及各種可用的SVG編輯工具等。
可以用以下六種方式在頁面文檔中嵌入SVG：
1. 作為圖片使用<img>標簽
<img src="mySVG.svg" alt="" />
2. 作為CSS背景圖片
.el {background-image: url(mySVG.svg);}
3. 作為對象用<object>標簽引入
<object type="image/svg+xml" data="mySVG.svg">
<!-- 如果瀏覽器不支持，這里顯示備選內容 -->
</object>
使用<object>的一大好處是可以提供瀏覽器不支持情況下的備選方案。
4. 使用<iframe>標簽
<iframe src="mySVG.svg">
<!-- 如果瀏覽器不支持，這里顯示備選內容 -->
</iframe>
如果想將SVG代碼以及腳本和主頁面徹底分離，<iframe>是個不錯的選擇。但是這樣一來在主頁面用 JavaScript操作SVG內容就變得稍微麻煩了，並且還有瀏覽器的同源策略限制。
5. 使用<embed>標簽
<embed type="image/svg+xml" src="mySVG.svg" />
<embed>雖然不是HTML規范的一部分，但仍然被廣泛支持。它原本是為了支持某些外部插件而存在的，比如 Adobe Flash插件就要依賴這個標簽。但是它不能提供瀏覽器不支持時的備選顯示內容。
6. 使用內聯<svg>標簽
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" …> <!-- svg 內容 --> </svg> 這是目前最常用的方式。
使用內聯SVG的好處是，可以將CSS樣式規則和控制腳本放在當前文檔的任何位置，而不是限制在<svg> 標簽中。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
7. 鏈接到 SVG 文件 用 <a> 標簽
<a href="circle1.svg">查看 SVG 文件</a>
參考資料
Styling And Animating SVGs With CSS