1.使用HTML标签

　以下三个标签所有主流浏览器都支持

　　a.<iframe>标签

　　优势：允许使用脚本

　　缺点：虽然不是HTML5的新增标签，但是不推荐在HTML4 和 XHTML中使用

　　例：<iframe src="circle.svg"></iframe>

　　b.<embed>标签 （HTML5新增标签）

　　例：<embed src="circlr.svg" type="image/svg+xml"/>

　　优势：允许使用脚本

　　缺点：只能在HTML5中使用

　　c.<object>标签

　　例：<object data="circle.svg" type="image/svg+xml"></object>

　　优势：可以在HTML4、HTML5 和 XHTML中使用

　　缺点：不能使用脚本

　　如果安装了最新版本的Adobe SVG viewer，那么使用object引用svg文件将不会起到作用，至少IE不会

2.直接嵌入HTML文档

　　注意点：IE9+、FF、Chrome、Safari可以直接在HTML中嵌入svg代码，Opera不可以

　　例：

　　<html>
　　<body>

　　<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  　　<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
　　</svg>

　　</body>
　　</html>

 3.使用a标签链接到SVG

　　例：

　　<a href="circle1.svg">View SVG file</a>

 

采访JON FERRAIOLO：SVG的过去，现在和未来（ 2012年10月15日 ）

SVG如何嵌套在HTML中的更多相关文章

  1. 关于ViewPager被嵌套在ScrollView中不显示的问题

    关于ViewPager被嵌套在ScrollView中不显示的问题 进入全屏 ScrollView 嵌套ViewPager,要不是业务需求这样,估计没人愿意这么干!因为这种方式,会问题多多,简单百度一下 ...

  2. WPF触屏Touch事件在嵌套控件中的响应问题

    前几天遇到个touch事件的坑,记录下来以增强理解. 具体是 想把一个listview嵌套到另一个listview,这时候如果list view(子listview)的内容过多超过容器高度,它是不会出 ...

  3. svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)

    svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...

  4. 母版页改变被嵌套的页面中的控件ID的解决方法

    使用过模板页的朋友都会很纳闷,怎么页面的用js通过getElementById(“id”):找不到对象.查看了页面源代码才发现,原来控件的ID变了,这是母版页导致的.因为母版页怕母版页本身页面中的控件 ...

  5. 嵌套在ScrollView中的TextView控件可以自由滚动

    //设置TextView控件可以自由滚动,由于这个TextView嵌套在ScrollView中,所以在OnTouch事件中通知父控件ScrollView不要干扰. mContractDesc.setO ...

  6. matlab学习笔记12_2创建结构体数组,访问标量结构体,访问非标量结构体数组的属性,访问嵌套结构体中的数据，访问非标量结构体数组中多个元素的字段

    一起来学matlab-matlab学习笔记12 12_2 结构体 创建结构体数组,访问标量结构体,访问非标量结构体数组的属性,访问嵌套结构体中的数据,访问非标量结构体数组中多个元素的字段 觉得有用的话 ...

  7. 1. svg学习笔记-在网页中使用svg

    在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...

  8. Android 6.0+ RecyclerView嵌套在ScrollView中显示不全

    ScrollView嵌套RecyclerView在Android6.0以下能正常显示,但是在6.0以上就会出现RecyclerView显示不全的bug.尝试多种方法之后终于找到解决办法,特在此记录下. ...

  9. 解决嵌套在ScrollView中的TableView滑动手势冲突问题

    最近在迭代开发公司项目的时候遇到了一个问题,在可以左右切换标签视图的ScrollView中嵌套了两个TableView用于展示视图,感觉一切so easy的情况下,问题出现了,因为左右两个视图既可以实 ...

随机推荐

  1. HTTP的上传文件实例分析

    这个是http文件传输的一种格式,当时不知道这种格式,废弃. HTTP的上传文件实例分析 由于论坛不支持Word写文章发帖. 首先就是附件发送怎么搞,这个必须解决.论坛是php的.我用Chrome类浏 ...

  2. Posix信号量操作函数

    Posix信号量: 分类: Posix有名信号量:使用Posix IPC名字标识,可用于线程或进程间同步Posix基于内存的信号量:存放在共享内存区中,可用于进程或线程间的同步 sem_open(). ...

  3. Windows7和Ubuntu12.04无法选择系统

    Windos7 旗舰版 Ubuntu12.04LTS 64位版本号 硬件挂载两个硬盘 SSD+机械 Windows7和Ubuntu12.04都装在SSD上.眼下先装好了Windows7,打算装Ubun ...

  4. Robotium结果的收集和失败重跑

    引用自 http://www.robotium.cn/archives/author/zered 测试用例: testsuite管理测试用例 测试结果的输出与收集? InstrumentationTe ...

  5. 【网站支付PHP篇】thinkPHP集成汇潮支付(ecpss)

    系列目录 支付宝集成:http://www.cnblogs.com/nerve/p/3437879.html 系列说明 最近在帮朋友的系统安装支付模块(兑换网站积分),现在总结一些开发心得,希望对大家 ...

  6. 解析SQL中的包含的列和表

    using System; using System.IO; using System.Collections.Generic; namespace SQLProcess { class Progra ...

  7. react native camera

    最近在尝试用react native camera iOS版本很方便就调试通过了,react的试用非常方便 android版本要单独试用fork的 屏蔽了lint的报错后也可以调试通过 参考这篇文章填 ...

  8. [RK3288][Android6.0] 调试笔记 --- 系统识别不同硬件版本方法【转】

    本文转载自:http://m.blog.csdn.net/kris_fei/article/details/70226451 Platform: RockchipOS: Android 6.0Kern ...

  9. WebAssembly，可以作为任何编程语言的编译目标，使应用程序可以运行在浏览器或其它代理中——浏览器里运行其他语言的程序？

    Mozilla.谷歌.微软和苹果已经决定开发一种面向Web的二进制格式.该格式名为WebAssembly,可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中. 几年前,我们在Inf ...

  10. netty codec部分剖析

    针对netty 3.2进行剖析 今天用到了netty的encoder和decoder(coder其本质还是handler),特剖析一个netty提供的coder,从而选择或者实现我自己的coder. ...