将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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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 代码优化的42条建议 推荐
2009/09/25 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python距离测量的方法
2018/03/06 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
学python爬虫能做什么
2020/07/29 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
高三生物教学反思
2014/01/25 职场文书
实习报告评语
2014/04/26 职场文书
大学生应聘求职信
2014/05/26 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
学党史心得体会
2014/09/05 职场文书
丧事主持词
2015/07/02 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书