矢量图与位图

矢量图与位图

1、形象的理解，矢量图可以无限放大，不会出现模糊状况，位图放大会有马赛克。

2、理论上简单说，位图记录的主要是像素的位置。就是一个一个像素排列成的，像素越多，也就是分辨率越高，图就越清晰，比如一个红色的圆，它用位图表示就是：有N个红色的像素分布在画布的某某位置。一般来说越清晰的图，体积就越大。

矢量图，就比较复杂，它其实记录的都是一些数据，其实它是虚拟图，比如一个红色圆形，矢量表示就是，在X多少Y多少的座标上，一个半径N毫米的圆形，里面填充了M100Y100的颜色，这些都是用一些算式、数据表示的。一般来说，矢量图的复杂程度决定了文件体积大小，因为用来描述复杂矢量图的数据太多了。

3、软件角度来说，位图处理软件一般用PHOTOSHOP，矢量图处理软件一般用CORELDRAW 、ILLUSTRATOR。

SVG与iconfont、图片多维度对比

SVG

SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。

简单的理解，它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。

● 兼容现有图片能力前提还支持矢量

● 可读性好，有利于SEO与无障碍（由于SVG采用的是XML语法，图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取，具体用法如下代码设置title与desc标签即可）

SVG与icon font对比

● 渲染方式不同

icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的，SVG它是图形，所以在浏览器中使用的是图形渲染，所以SVG却没有这种问题。

● icon font只能支持单色

icon font做为字体无法支持多色图形，这就对设计造成了许多限制，因此这也成为了icon font的一个瓶颈。

● icon font可读性不好

icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好

SVG制作成本与维护成本

目前制作SVG设计软件有：Adobe Illustrator、Visio以及CorelDRAW等，AI做好后直接导出成SVG格式给前端同学即可使用。相比制作字体包要步骤简单许多。

在维护性方面：做成SVG对设计师之前的工作量也有一定的提升，过去他们同一个图不同尺寸在PS输出都需要调整一次图形，因为如果直接等比例缩放图形尺寸，会出现图片有锯齿。但是用SVG以后，不同尺寸的控制都有前端同学直接调整SVG宽高参数就能实现不同尺寸切换，且不会有锯齿。

SVG动画

SVG还有一项动画的能力，目前在许多H5中的有趣动画很多都是用SVG做的。