SVG之旅:SVG简介

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因,并没有对SVG进行系统化的学习,在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识,并尝试在项目中使用SVG,有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识,希望在几个月后,这方面的技术有所突破。

为了能记录SVG的学习和探索过程,整个学习的路径以及笔记将会在W3cplus的SVG之旅中分享出来。希望对喜欢SVG的同学有所帮助。如果您是这方面的专家,欢迎分享您的经验。

要学习SVG相关的知识,那么就很有必要的知道,SVG是什么?今天我们就简单的来介绍SVG是什么?

图形系统

计算机中描述图形的信息主要有两大系统:栅格图形和矢量图形

栅格图形

栅格图形(Raster Graphics)又常称为位图或点阵图,是使用像素阵列(Pixel-Array / Dot-Matrix点阵)来表示图像。其实栅格图形也是一种数据结构,代表了有限区域中的稠集(Dense Set),每一个元素至少出现一次,没有其他的数据和元素相关联。在索引,数据压缩等方面有广泛应用。

栅格图形系统中,图像被表示为图片元素或者像素的长方形数组。而栅格图像的像素部分都分配有特定的位置颜色值。每个像素的颜色信息由RGB组合或者灰度值表示。

根据位深度,可将栅格图形分为148162432位图像等。每个像素使用的信息位数越多,可用的颜色就越多,颜色表现就越逼真,相应的数据量就越大。比如,位深度为1的像素位图只有两个可能的值(黑色和白色),所以又称之为二值位图。位深度为8的图像有28次方个可能的值(也就是256)。位深度为 8 的灰度模式图像有 256 个可能的灰色值。

RGB图像由三个颜色通道组成。8 位/像素的 RGB 图像中的每个通道有 256 个可能的值,这意味着该图像有 1600 万个以上可能的颜色值。有时将带有 8 位/通道 (bpc) 的 RGB 图像称作 24 位图像(8 位 x 3 通道 = 24 位数据/像素)。通常将使用24位RGB组合数据位表示的的位图称为真彩色位图。

在浏览器还没有对SVG这样的矢量图进行支持之前,我们在Web中使用的图像都是栅格图形,比如jpggif等格式的图形。栅格图形的再现能力较强,但是在某些情形下会显得不足。比如,当浏览器以不同大小显示图像时,特别是当一张小图放大显示时,通常会产生锯齿边缘。也就是我们常说的,致使图像失真。

矢量图形

矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。简单地说,在矢量图形系统中,图像被描述为一系列几何形状。矢量图形阅读器接受在指定坐标集上绘制形状的指令,而不是接受一系列已计算好的像素。

通俗的说:矢量图通过指定为确定每个像素的值所需的指令而不是指定这些值本身,克服了这些困难中的一部分。例如,向量图形不再为一个直径一英寸的圆提供像素值,而是告诉浏览器创建一个直径一英寸的圆,然后让浏览器(或插件)做其余事情。这消除了光栅图形的许多限制;使用向量图形,浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示,那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地,浏览器接收的指令可以更容易地与外部信息源(如应用程序和数据库)绑定,要对图像制作动画,浏览器只要接收有关如何操纵属性(如半径或颜色)的指令即可。

矢量图形相对于栅格图形而言,具有以下几个优势:

  • 保存最少的信息,文件大小比位图要小,并且文件大小与物体的大小无关
  • 在图像处理软件中,任意放大矢量图形,不会丢失细节或影响清晰度,因为矢量图形是与分辨率无关的。无限地放大这个圆,它仍然保持平滑;用多边形表示的曲线将会显现出不是真正的曲线
  • 在放大的时候,直线与曲线都
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-intro.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部