将SVG 图引入到HTML页面

将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>

这里推荐一下，一个图标网址，上面全是免费的图标可供下载：

网址：http://www.iconfont.cn/plus/user/detail?uid=17211

将SVG 图引入到HTML页面相关推荐

iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
html可以用坐标画svg图吗,HTML5如何使用SVG的方法示例
代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势: SVG 可被非常多的工具读取和 ...
自动选择SVG和VML的WEB页面
2019独角兽企业重金招聘Python工程师标准>>> 自动选择SVG和VML的WEB页面问题在WEB上使用二维图形编程的人员现在面临者一个两难的选择,是使用SVG,还是VML? ...
使用 SVG 动画实现弹性的页面元素效果
Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...
svg载入html,SVG系列教程：SVG简介与嵌入HTML页面的方式
随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等 ...
使用d3.v3插件绘制出svg图
众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的接下来看代码吧从后台获取到带id和父id的目录数据[json格式] var module = requestU ...
html铺满整个页面_html 怎么让背景图铺满整个页面？
html中,怎么让背景图片充满整个页面 html 怎么让背景图铺满整个页面雨声潺潺,像住在溪边.宁愿天天下雨,以为你是因为下雨而不来. 也就是一张网页内容有多长多宽,那一张背景图就要放大到那么大,例如 ...
html让背景图铺满整个页面
html让背景图铺满整个页面 <style> body {background:url("zz.jpeg") no-repeat center center; /*加载 ...
新增轮播图跳转web页面、轮播、推荐歌单数据存储（简易音乐七）
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐七) 关于效果图第一步,添加引用新增数据库实体类修改fragment代码新增WebActivity页面加载网页关于本篇主 ...