網站如何使用svg

原创 2013年12月03日 20:21:15

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


CentOS 5用snmp配合MRTG显示系统状态

CentOS 5用snmp配合MRTG显示系统状态 1. 软件安装 MRTG 官方網站:http://oss.oetiker.ch/mrtg/ 在这里 都用dag的yum源 以yum的方式安装...
  • zyu67
  • zyu67
  • 2014年01月02日 09:46
  • 846

成交型网站 设计

如何快速倍增医美网络业绩? 如何让网络顾客主动和我们联系呢? 如何让顾客第一眼看见我们网站就相信我们? 百分之九十的整形医院的网站都需要优化,你知道怎么去优化吗? 成交型网站(...
  • amnotsuperior
  • amnotsuperior
  • 2015年04月23日 15:28
  • 614

Kaggle入门模板:以手写识别Digit Recognizer为例

首先本文参考了点击打开链接 这篇博客,然后可能时间有点久远,Kaggle的这道题给的数据文档和之前的不一样了,以及还有一些注意点这篇文章里没有突出。因此这里重新做个总结,希望大家能早点入个门。 这里...
  • qq547276542
  • qq547276542
  • 2017年07月05日 10:24
  • 2441

提高网站并发性的解决方案

我在Cernet做过拨号接入平台的搭建,而后在Yahoo3721负载搜索引擎前端平台开发,又在猫扑处理过大型社区猫扑大杂烩的架构升级等工作,同时自己接触和开发过不少大中型网站的模块,因此在大型网站应对...
  • qq415734794
  • qq415734794
  • 2013年08月17日 14:22
  • 3784

IBM的云平台Bluemix使用初体验——创建PHP Web 应用程序,添加并使用语言翻译服务

概述 本文参加活动: 博客征文:云服务器使用初体验 通过本文学习,你将能够在IBM的云平台Bluemix上创建自己的PHP Web 应用程序,发布自己的PHP页面到云服务器上。Bluemix 是什么?...
  • testcs_dn
  • testcs_dn
  • 2015年11月14日 13:09
  • 4849

日語網站大全

张老师给的(日语视听老师)   搜索引擎 http://www.goo.ne.jp http://www.infoseek.co.jp http://www.bekkoame.ne....
  • cactusz
  • cactusz
  • 2017年07月06日 15:39
  • 254

在HTML中使用SVG

如何在HTML中显示SVG? 有四种方式能够在HTML中显示SVG。 第一种:embed标签 这种标签被所有主流的浏览器支持,而且优点是支持脚本使用。这种标签是adobe svg viewer所倡导的...
  • lfsf802
  • lfsf802
  • 2014年03月23日 22:23
  • 17666

Android使用 SVG 资源文件(一)

这里就不介绍背景了,直接说说在 Android 中如何使用 SVG资源吧! 使用步骤: 1、SVG资源的源文件 要使用 SVG资源,我们首先得有 svg 资源,在哪里找呢,有很多工具能够生成 S...
  • jxxfzgy
  • jxxfzgy
  • 2015年05月05日 17:37
  • 11177

1.Ext JS 建立web开发工程

搭建了一个extjs6的web开发环境。
  • inforstack
  • inforstack
  • 2016年12月08日 12:15
  • 674

Android使用SVG小结

SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形。它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降。它的优点在于节约空间,使用方便。andro...
  • Dick_zeng
  • Dick_zeng
  • 2017年05月18日 16:37
  • 2250
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:網站如何使用svg
举报原因:
原因补充:

(最多只允许输入30个字)