将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与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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/10/29 PHP
网站上面有这种切换效果
2006/06/26 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
js实现微信聊天界面
2020/08/09 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python简单线程和协程学习心得(分享)
2017/06/14 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
图书室管理制度
2014/01/19 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
家长对孩子的感言
2014/03/10 职场文书
党员政治学习材料
2014/05/14 职场文书
企业文化理念标语
2014/06/10 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang