将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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Django框架验证码用法实例分析
2019/05/10 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
Ajax的工作原理
2015/12/04 面试题
幼儿园实习生辞职信
2014/01/20 职场文书
个人查摆剖析材料
2014/02/04 职场文书
高一新生军训方案
2014/05/12 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby