SVG(可缩放矢量图形)
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
特点:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
特点:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
<svg width="100%" height="100%" >
<circle cx="" cy="" r="" stroke="#ff0" stroke-width="" fill="red" />
</svg> <img src="kiwi.svg" alt="新西兰鹬鸵鸟">
<a href="/" class="logo" style="background: url(kiwi.svg); display: block;text-indent: -9999px;width: 100px;height: 82px;background-size: 100px 82px;"> 新西兰 </a>
适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。
可扩展性:图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标,然而,使用位图,你必须得为每个不同大小的图像输出一个不同文件。
灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。他们还可以在任何背景下显示。
兼容性:网页字体支持所有现代浏览器,包括IE低版本。
弊端:
1、浏览器将其视为文字进行抗锯齿优化,有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同,可能会导致显示效果不同。
2、Icon Font 作为一种字体,Icon 显示的大小和位置可能要受到font-size
、line-height
、word-spacing
等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响,调整起来很不方便。
3、使用上存在不便。首先,加载一个包含数百图标的 Icon Font,却只使用其中几个图标,非常浪费加载时间。 如果是自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。当然使用阿里UX矢量图标库可以解决这个问题
4、为了实现最大程度的浏览器支持,可能要提供至少四种不同类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。如果是自己制作的话,可能要头疼死
SVG(可缩放矢量图形)的更多相关文章
- svg可缩放矢量图形
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. <svg xmlns="http://www.w ...
- SVG :可缩放矢量图形(Scalable Vector Graphics)。
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 使用 XML ...
- svg(可缩放矢量图形)
入门推荐: http://www.ruanyifeng.com/blog/2018/08/svg.html (教程) http://www.runoob.com/svg/svg-reference.h ...
- HTML5: SVG (可缩放矢量图形)
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
- svg技术(可缩放矢量图形)介绍
公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到:平台现有控件都是用的一个开源flash,我对flash虽然会一点但 ...
- HTML5 可缩放矢量图形(1)—SVG基础
参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...
- svg整体缩放至指定大小
一.问题 svg画面跑在分辨率低的电脑上,导致不能完全显示. 二.要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸. 三.实现 1.获取本机窗口高度.宽度 let clientWidth ...
- [Swift通天遁地]八、媒体与动画-(5)使用开源类库绘制文字、图形、图像、图表、SVG(可缩放矢量图形)
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- HTML5 可缩放矢量图形(2)—SVG基础
参考文档——权威 SVG常识 渲染顺序——后来居上:越后面的元素越可见 单位——可以指定,也可以不指定,默认px,其他:em.%.cm.mm... SVG画布——绘制图像的区域,无限大 SVG视窗—— ...
随机推荐
- PAT 甲级 1012 The Best Rank
https://pintia.cn/problem-sets/994805342720868352/problems/994805502658068480 To evaluate the perfor ...
- sublime text 3103 怎么设置中文
1.shift+ctrl+p调出插件管理,输入install package,按enter键,开始安装. 2.搜索chinese即可,下载安装插件包即可 原文:http://blog.csdn.net ...
- Java 8中 基本数据类型
1)四种整数类型(byte.short.int.long): byte:8 位,用于表示最小数据单位,如文件中数据,-128~127 short:16 位,很少用,-32768 ~ 327 ...
- Android基础------高级ul:消息提示
前言:Android消息提示笔记,刚刚接触Android 1.静态方法Toast 直接调用静态方法 //消息提示(context,"内容",固定时间) Toast.makeText ...
- deep learning2
九.Deep learning的常用模型或者方法 9.1.AutoEncoder自动编码器 Deep Learning最简单的一种方法是利用人工神经网络的特点,人工神经网络(ANN)本身就是具有层次结 ...
- python中元组与小括号的关系
在学习Python 的时候.说到有两种数据类型,一种叫 列表,一种叫做元组,可以认为,元组是功能精简的列表.因为它少了列表很多功能.但是又有相识.定义他们的时候,主要是用中括号和小括号之分. 例如:定 ...
- CodeForces 185A. Plant (矩阵快速幂)
CodeForces 185A. Plant (矩阵快速幂) 题意分析 求解N年后,向上的三角形和向下的三角形的个数分别是多少.如图所示: N=0时只有一个向上的三角形,N=1时有3个向上的三角形,1 ...
- getElementsByClassName的原生实现
DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点.另外,getElementByTagName() 方法会返回一个对象 ...
- 用camke编译python程序
project(test) cmake_minimum_required(VERSION 3.0) find_package(OpenCV REQUIRED) find_package (Python ...
- iOS中产生随机数的方法
利用arc4random_uniform()产生随机数 Objective-C 中有个arc4random()函数用来生成随机数且不需要种子,但是这个函数生成的随机数范围比较大,需要用取模的算法对随机 ...