将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动画效果
Aug 14 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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中字符安全过滤函数使用小结
2015/02/25 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
详解JavaScript函数
2015/12/01 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python插入数据到列表的方法
2015/04/30 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python如何输出警告信息
2020/07/30 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
优秀员工自荐书
2013/12/19 职场文书
篮球赛口号
2014/06/18 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
岳麓书院导游词
2015/02/03 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python