在网页中使用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. eclipse 安装插件报错问题

    报错信息 An error occurred while installing the items session context was:(profile=epp.package.jee, phas ...

  2. 在Android Studio添加本地aar包引用

    1.如何在Android Studio添加本地aar包引用 https://jingyan.baidu.com/article/2a13832890d08f074a134ff0.html 2.完成上述 ...

  3. python异步编程--回调模型(selectors模块)

    目录 0. 参考地址 1. 前言 2. 核心类 3. SelectSelector核心函数代码分析 3.1 注册 3.2 注销 3.3 查询 4. 别名 5. 总结 6. 代码报错问题 1. 文件描述 ...

  4. oc中的oop基础及类的基本介绍

    面向对象的(OOP)的基础知识 类(class):表示一组对象数据的结构体,对象通类来得到自身.类名首字母大写. 对象(objcet):是一种包含值和指向其类的隐藏指针的结构体.运行中的程序中通常会有 ...

  5. 等宽高的ImageButton

    @SuppressLint("AppCompatCustomView") public class SquareImageButton extends ImageButton { ...

  6. 高可用Hadoop平台-Oozie工作流

    1.概述 在开发Hadoop的相关应用使用,在业务不复杂,任务不多的情况下,我们可以直接使用Crontab去完成相关应用的调度.今天给大家介绍的是统一管理各种调度任务的系统,下面为今天分享的内容目录: ...

  7. Python 虚拟环境 | Mac/Linux下如何避坑安装配置Virtualenv

    1.为什么要使用虚拟环境 在Python中,不同的应用可能需要用到不同版本的第三方包,而这些第三方包被统一存放到目录site-packages中,不同版本的包容易相互覆盖,如安装Django 2.1时 ...

  8. OS开发(2):自定义tabbar | 导航条 | 突显中间按钮

    tabbar是放在APP底部的控件,也叫navigationbar或导航条.常见的APP都使用tabbar来进行功能分类的管理,比如微信.QQ等等. 需求是这样的,需要一个特殊一点的tabbar,要求 ...

  9. Angular学习第一步

    前端开发越来越流行了,作为后端开发人员,也开始需要学习前端了.随着前端技术的发展,前端技术也越来越复杂,复杂程度不亚于后端,各种框架各种设计模式前端都用上了,什么AngularJS,Angular, ...

  10. process_begin: CreateProcess(NULL,......) make (e=87): 参数错误。

    在编译 trinity-android 的过程中,总是报 process_begin: CreateProcess(NULL,......) make (e=87): 参数错误 原因是.MK文件中包含 ...