web开发中svg图片的使用

一、相关概念

1、位图与矢量图概念及对比

• 位图 ：又叫点阵图或像素图，计算机屏幕上的图你是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。多个像素的色彩组合就形成了图像，称之为位图。代表格式.png,.jpg,.gif等。
• 矢量图： 又叫向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。主流格式 SVG格式、 WMF文件格式、 EMF文件格式、EPS文件格式 、DXF文件格式等。
• 位图与矢量图 的区别：

第一、变现程度的区别, 位图可以用来表现真实事物的真实且详尽的面貌。位图的分辨率越高就能表现得越详尽、越细腻,如,表现某事物的质地、纹理、发丝、毛孔、颜色的细微变化、颜色的千变万化等。矢量图只用来表现真实世界中的事物大概面貌－大概的轮廓与大致的颜色，不能表现千万种不规则变化的真实事物画面。或者用来表现人脑中想向出来的而现实中没有的事物，比如，各种徽标、设计图纸、卡通画。

第二、来源区别，简单的说，一张 位图最初来源于对真实事务的拍摄，而矢量图来源主要来源人工绘制。

第三、计算机上保存的本质不同，位图保存的是构成这张图像的颜色信息（点即像素）。而文件大小会随着像素信息大小变化，例如，存储一个纯红色矩形，如果是100*100的图像，将保存10000个像素信息。如果把图像长宽变为原来的2倍图像保存，则文件大小将增加到原来的4倍。而 矢量图保存在电脑上，保存的是绘制出这张图像的方法，包括图像中某些点的坐标值和需要填
充的颜色。同样保存一个纯红色矩形时，相当于只保存了矩形的四个角坐标值个需要填充的红色这几个信息，如果要把矩形长宽放大到原2倍保存，只是改变了原信息中的4个角的坐标值。文件大小基本没有改变。

2、web开发中常用图片比较

图片格式	压缩方式	透明度	动画	浏览器兼容	适用场景
JPEG	有损压缩	不支持	不支持	所有	适用于层次丰富、色彩较多的照片、摄影等图像
JPEG2000	有、无损压缩	不支持