将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 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
background-position百分比原理详解
May 08 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP attributes()函数讲解
2019/02/03 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
浅析Git版本控制器使用
2017/12/10 Python
微信跳一跳python代码实现
2018/01/05 Python
Python中文件的读取和写入操作
2018/04/27 Python
python实现画一颗树和一片森林
2018/06/25 Python
python 重命名轴索引的方法
2018/11/10 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
大学生应聘自荐信
2013/10/11 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
企业贷款委托书格式
2014/09/12 职场文书
超市员工辞职信范文
2015/05/12 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Python必备技巧之函数的使用详解
2022/04/04 Python