網站如何使用svg

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/

http://caniuse.com/svg-css