在网页中使用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. NFS客户端挂载

    关于NFS挂载#卸载: umount -fl /挂载名称#重新挂载:mount -t nfs -o rw,noac 10.8.16.11:/vx/SJOA-APP /挂载名称 #mount –v查看当 ...

  2. DataFrame基本操作

    这些操作在网上都可以百度得到,为了便于记忆自己再根据理解总结在一起.---------励志做一个优雅的网上搬运工 1.建立dataframe (1)Dict to Dataframe df = pd. ...

  3. 课程四(Convolutional Neural Networks),第四 周(Special applications: Face recognition & Neural style transfer) —— 2.Programming assignments:Art generation with Neural Style Transfer

    Deep Learning & Art: Neural Style Transfer Welcome to the second assignment of this week. In thi ...

  4. tf.cast()的用法(转)

    一.函数 tf.cast() cast( x, dtype, name=None ) 将x的数据格式转化成dtype.例如,原来x的数据格式是bool, 那么将其转化成float以后,就能够将其转化成 ...

  5. 使用 JRebel 进行远程热部署

    JRebel支持热部署,和远程热部署,本文我们来搭建一下远程热部署. 一.服务器安装 JRebel 1.官网下载最新的 JRebel 安装包,下载链接:https://zeroturnaround.c ...

  6. windows下安装Jenkins

    1.在机子上安装jdk8 2.下载jenkins.war在里面可以选择任意版本的war包,lastest为最新的,推荐下载! 官网地址:https://jenkins.io/download/ 3.打 ...

  7. 深入理解苹果系统(Unicode)字符串的排序方法

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由iminder发表于云+社区专栏 Unicode编码 我们知道计算机是不能直接处理文本的,而是和数字打交道.因此,为了表示文本,就建立 ...

  8. Netty 超时机制及心跳程序实现

    Netty 超时机制的介绍 Netty 的超时类型 IdleState 主要分为: ALL_IDLE : 一段时间内没有数据接收或者发送 READER_IDLE : 一段时间内没有数据接收 WRITE ...

  9. spring的第二天

    spring的第二天 ssm框架 spring  在昨天简单的介绍了一下spring,那么今天接着继续介绍. spring值的注入 自动装配[autowire] 引用资源 applicationCon ...

  10. 【hihoCoder】#1133 : 二分·二分查找之k小数

    题目描述 在上一回里我们知道Nettle在玩<艦これ>,Nettle的镇守府有很多船位,但船位再多也是有限的.Nettle通过捞船又出了一艘稀有的船,但是已有的N(1≤N≤1,000,00 ...