将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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python素数检测实例分析
2015/06/15 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python用input输入列表的实例代码
2020/02/07 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
元旦趣味活动方案
2014/08/22 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
用python实现监控视频人数统计
2021/05/21 Python