SVG之旅：SVG简介

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

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

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

图形系统

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

栅格图形

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

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

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

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

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