https://www.w3school.com.cn/svg/svg_inhtml.asp

1.img標(biāo)簽引入

<img src="picture.svg">chrome顯示不全問題（有時(shí)會顯示完整）；IE，火狐，safari正常

移動端縮放文字比例失調(diào)問題處理：

svg文件中給所有的text標(biāo)簽加上text-rendering="geometricPrecision"

2.使用css作為背景圖片

div{background:url("picture.svg") no-repeat center top;background-size:contain;}

chrome顯示不全問題（有時(shí)會顯示完整），IE，火狐，safari顯示正常；

移動端縮放文字比例失調(diào)問題處理：

svg文件中給所有的text標(biāo)簽加上text-rendering="geometricPrecision"

缺點(diǎn)是不能根據(jù)svg背景圖自適應(yīng)大小

3.object標(biāo)簽引入

chrome，IE9以上正常，火狐不顯示，safari不能等比縮放出現(xiàn)滾動條

移動端文字可以等比縮放

4.embed標(biāo)簽引入

<embed src="picture.svg" width="100%" height="100%" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

chrome，IE，火狐正常；safari不能等比縮放出現(xiàn)滾動條

移動端文字可以等比縮放

同一個(gè)頁面，object標(biāo)簽一定要放在最后，否則其之后的標(biāo)簽瀏覽器中不出現(xiàn)