将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支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 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的error_reporting错误级别变量对照表
2014/07/08 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
python实现简单的socket server实例
2015/04/29 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
环保标语大全
2014/06/12 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
单方投资意向书
2015/05/11 职场文书
实施意见格式范本
2015/06/05 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL