将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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 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邮箱验证示例教程
2016/06/01 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
javascript 获取图片颜色
2009/04/05 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
python简单的函数定义和用法实例
2015/05/07 Python
python获取mp3文件信息的方法
2015/06/15 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
土木工程应届生自荐信
2013/09/24 职场文书
文秘应届生求职信
2014/07/05 职场文书
投资意向书
2014/07/30 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
golang正则之命名分组方式
2021/04/25 Golang