关闭

網站如何使用svg

标签: svgbase64img
1005人阅读 评论(0) 收藏 举报
分类:

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


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5480次
    • 积分:141
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类