将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 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 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实现下载限制速度示例分享
2014/02/13 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
JsRender for object语法简介
2014/10/31 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python中下划线的使用方法
2015/03/27 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
企业管理培训感言
2014/01/27 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
2016年暑期见闻作文
2015/11/25 职场文书