1. 作為<object>來使用
<object type="image/svg+xml" data="kiwi.svg" class="logo">
Kiwi Logo <!-- fallback image in CSS -->
</object>
2. 在css中的用法(向下兼容)當瀏覽器不支持svg時使用代替的圖片
body {
background: url(image.png);
background-image: url(image.svg), none;
}
3. 將圖片轉為base64編碼,給予img的src或css的background或object的data
<img src="data:image/svg+xml;base64,[data]>
.logo {
background: url(data:image/svg+xml;base64,[data]);
}
<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>
fallback
</object>
想瞭解更多情況請閱讀
http://css-tricks.com/using-svg/