在网页中使用svg有以下三种方式

1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为<img>元素的src属性,或者是给任意的元素设置背景图像,或者是设置为CSS3的属性border-image。但是这种方式的缺点也很明显,就是浏览器在渲染svg图像的时候,会将svg描述的矢量图像转换成栅格图像用于显示,这就失去了svg的一部分功能,svg是文本描述的图像格式,可能会有一些引用文件,比如其他的图像文件,外部脚本或者是web字体文件,在使用这种方式渲染svg时大多数浏览器会忽略引用文件。

2. <object>元素可以将外部的文件嵌入到html中,

3. 在网页中嵌入svg,最直接的方式莫过于将svg文件的内容直接写入html文本中,这样在网页中不仅可以显示svg图像,还可以使用脚本控制,用css添加样式,可谓是最好的做法。在XHTML中添加svg时,需要在顶级<svg>元素上设置xmlns=”http://www.w3.org/2000/svg”,它会改变该元素和其所有子节点的默认命名空间,对于HTML5文件,则可以省略这一步。svg在网页中默认以内联元素的方式显示。

1. svg学习笔记-在网页中使用svg的更多相关文章

  1. python学习笔记——提取网页中的信息正则表达式re

    被用来检索\替换那些符合某个模式(规则)的文本,对于文本过滤或规则匹配,最强大的就是正则表达式,是python爬虫里必不可少的神兵利器. 1 正则表达式re基本规则 [0-9] 任意一个数字,等价\d ...

  2. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  3. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  4. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

  5. [学习笔记] 在Eclipse中导入项目

    参考前文:[学习笔记] 在Eclips 中导出项目 选择已经导出的文件: 导入之后,项目结构如下: 至此,完成.

  6. CockroachDB学习笔记——[译]CockroachDB中的SQL:映射表中数据到键值存储

    CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...

  7. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar中的类解压后放在运行jar中

    前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中 使用7z打开压缩包,查看所有依赖的jar都被解压以包名及class的方式存储在了运行jar中,此时jar的 ...

  8. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中

    本文需要参考前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar在子目录中 上文是导出的运行的依赖jar被放在了子目录中,本文是将依赖jar放在可运行jar的本身,这样发布的 ...

  9. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar在子目录中

    工程创建可参考前文: [学习笔记] 在Eclipse中使用Hibernate,并创建第一个工程,数据库为Oracle XE 在工程上鼠标右键: 找到java 选择 Runable JAR file N ...

随机推荐

  1. appium-doctor

    1.   I installed appium-1.5.3.dmg But when I click the stethoscope button the Appium is show error : ...

  2. linux系统中的文件权限详解(转)

    一.在<Linux系统中如何查看文件属性>中介绍了通过ls指令来查看文件的属性,具体如下: [命令] letuknowit@ubuntu:/$ cd /tmp letuknowit@ubu ...

  3. PostgreSQL Json字段作为查询条件案例

    业务扩展字段在数据库中经常会使用json格式的数据来存储,这就涉及到一个头疼的问题,假设要使用扩展字段里的某个值作为查询条件怎么办,原来PostgreSQL本身就支持这种查询方式. 例子:假设业务扩展 ...

  4. SQL 必知必会·笔记<19>使用游标

    游标(cursor)是一个存储在DBMS服务器上的数据库查询,它不是一条SELECT语句,而是被该语句检索出来的结果集.在存储了游标之后,应用程序可以根据需要滚动或浏览其中的数据. 使用游标 使用游标 ...

  5. 音频标签化3:igor-8m项目的训练、评估与测试

    上一节介绍了youtube-8m项目,这个项目以youtube-8m dataset(简称8m-dataset)样本集为基础,进行训练.评估与测试.youtube-8m设计用于视频特征样本,但实际也适 ...

  6. java基础之继承(一)

    虽然说java中的面向对象的概念不多,但是具体的细节还是值得大家学习研究,java中的继承实际上就是子类拥有父类所有的内容(除私有信息外),并对其进行扩展.下面是我的笔记,主要包含以下一些内容点: 构 ...

  7. vue里碰到 $refs 的问题

    记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域 ...

  8. css布局------上下高度固定,中间高度自适应容器

    HTML <body> <div class="container"> <div class="header"></d ...

  9. python元祖操作和内置方法

    1 元祖:元祖可以理解为一个不可变的列表 2 用途:用于存放多个值,当存放的多个值只有读的需求而没有改的需求时用元祖最合适 3 定义:在()内用逗号分隔开多个任意类型的值.注意:当只有一个元素的时候, ...

  10. Vue 动态加载组件

    为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...