将SVG图引入到HTML页面的实现


Posted in HTML / CSS onSeptember 20, 2019

将SVG图引入到HTML网页,目前只有三种办法,前两种很相似,第三种更简单。下来介绍一下这是那种方法。

第一种:

使用<embed>标签:
 

这个是官方推荐的用法,但是这个官方是Adobe官方,不是W3C官方,现在的HTML标准里还没有这个标签。

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

pluginspage表示的是插件下载地址。

第二种:

使用<object>标签:
 

这个是W3C的规范,在HTML标准里有这个标签,这个标签里面不能使用js。

<object data="example.svg" width="300" height="300" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/imstall/" />

codebase也是插件下载地址

另外,如果安装了Adobe SVG Viewer ,这个就不能使用(这是什么理论,插件下载地址都是一样的…)。

第三种:

使用 <iframe> 标签
<iframe> 标签可工作在大部分的浏览器中。

<iframe src="rect.svg" width="300" height="100">
</iframe>

这里推荐一下,一个图标网址,上面全是免费的图标可供下载:

将SVG图引入到HTML页面的实现

将SVG图引入到HTML页面的实现

网址:http://www.iconfont.cn/plus/user/detail?uid=17211

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 #HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 #HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 #HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 #HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 #HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 #HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 #HTML / CSS
You might like
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JavaScript中数组Array方法详解
2017/02/27 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python在文本开头插入一行的实例
2018/05/02 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
什么是python的函数体
2020/06/19 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
大学应届毕业生求职信
2014/05/24 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
物业管理专业求职信
2014/06/11 职场文书
辞职信如何写
2015/02/27 职场文书
企业员工辞职信范文
2015/05/12 职场文书
《检阅》教学反思
2016/02/22 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers
VUE递归树形实现多级列表
2022/07/15 Vue.js