将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 29 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5 body设置自适应全屏
May 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图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
简单的JS多重继承示例
2008/03/13 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
js字符串转成JSON
2013/11/07 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
vue.js实现简单轮播图效果
2017/10/10 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
小程序实现密码输入框
2020/11/16 Javascript
python人人网登录应用实例
2014/09/26 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
购房协议书
2014/04/11 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang