位图和矢量图：web图形的发展.txt

Web图形的发展：位图与矢量图

-尽管应用于Web的图像技术并没有跟上其它Web技术发展的步伐，但是进步总是会出现，比如PNG文件和矢量图形格式。->

因特网速度——这个名词反映了Web日新月异的发展速度。但是图形这个对Web成长至关重要的元素却没有跟上其它技术发展的步伐。GIF们是任劳任怨的工匠——简单的图像、按钮或类似的什么东西——但是它们被限于256色。JPEG们是缤纷世界的主宰——高分辨率和高色彩的数字化图像——但是在压缩太厉害时却损失了图像的品质。其它一些解决方案比如ShockWave或是Flash的确令人眼花缭乱，但是却需要用户没有的插件。

可喜的是，新的解决方案出现了。最近，可移植网络图形（Portable Network Graphics,PNG）已经成熟了，它提供了针对透明度的Alpha通道、针对高级逐级显示的二维隔行以及针对独立亮度调校的gamma修正。Web图形的发展趋势是使用矢量图代替位图，将提供所有上述这些再加上可缩放性和小的尺寸。下面我们将回顾一下传统的技术，然后再探究一下Web图形标准的发展。

表A：Web图形格式的比较

 GIF87a
 GIF89a
 JPEG
 P-JPEG
 PNG
 
最大颜色深度
 8位
 8位
 24位
 24位
 48位
 
压缩
 无损
 无损
 有损
 有损
 无损
 
隔行
 是
 是
 否
 是
 是
 
动画
 否
 是
 否
 否
 否
 
透明
 否
 是
 否
 否
 是
 
可变的透明度
 否
 否
 否
 否
 是
 
Gamma修正
 否
 否
 否
 否
 是
 
支持的浏览器
 Explorer, Navigator
 Explorer 3, Navigator 2
 Explorer 2, Navigator 2
 Explorer 4, Navigator 4
 Explorer 4, Navigator 4.04
 


古旧的装备

CompuServe的图形交换格式（GIF）是世界上最为广泛支持和使用的图像格式。在Web上使用两个格式版本：GIF87a和GIF89a。GIF87a是最原始的规格，从1987年投入使用。它的主要特性是无损压缩和支持隔行（将图像中各行像素分组，逐阶段显示）。GIF89a是一个扩展，加入了动画效果和透明度。Netscape Navigator 2.0 版本和Microsoft Internet Explore 3.0版本支持两种GIF格式。

GIF是使用索引色的点阵图像格式。形成图像点阵就是将表示图像像素信息的颜色数位值存贮起来的过程。GIF使用RGB（红、绿、蓝）颜色值来决定一个像素的颜色，比如255，255，255表示白色，0，0，0表示黑色。这些颜色值被存储在调色板上，当需要再现时，则使用一个单一数值即颜色选用板的索引值。通过在颜色选用板上存储索引而不是实际的RGB值，以及使用一种压缩过程，GIF可以获得大约4：1的压缩率，这意味着压缩后的图像是原始图像的四分之一大小。小的图像需要少的磁盘空间，使用少的网络带宽，占用少的下载时间。

GIF的主要缺点是一幅图像只能饱含256种颜色。尽管有这种限制，许多的图像只使用较少的颜色，特别是Web上的按钮、公告和导航工具条。

JPEG是由联合图像专家组开发的静态图像压缩标准。它为保存和传输照片品质的图像而设计。类似于GIF，JPEG也是一种点阵图像格式，像素值被存储在图像文件里。不同于GIF的是，JPEG不使用索引色，不支持透明度、隔行和动画效果。

JPEG支持24位真彩色，这意味着屏幕上的每一个像素有与之相关联的24位信息。在800乘600像素的屏幕上有480，000个像素，你可以想象真彩图像是多么迅速地吞食硬盘空间。幸运地是，JPEG支持高效的压缩算法，能够大幅度缩减磁盘空间的需求。一些图像可以缩减为原来尺寸的1/20。

然而，到那种程度的压缩是有缺点的。首先，JPEG压缩是有损的，这意味着一些信息在压缩中丢失了。这种损失是否被能感觉到依赖于图像的压缩方式。此外，这些图像一般需要较长的时间来解码才能观看，实际的解码时间依赖于用户的系统和压缩量。

JPEG使用户可以使用鲜亮的色彩，它提供了对复杂图像和数字化照片的支持，但是它不是为应用简单图形而设计的。JPEG的压缩可能令这些图像发生混乱，特别是颜色很少颜色图像或者单一颜色的区域。因此，JPEG的压缩不像GIF的压缩对缩减简单图像尺寸那样有效。JPEG压缩是为复杂的、高分辨率的图像设计的，它对基本的低分辨率的图像效果不佳。

JPEG的扩展，称为P-JPEG（逐级JPEG）在Internet Explore 4.0和Netcape Navigator 4.0上实现了。P-JPEG支持下载时图像的逐级显示。有了逐级显示，你一下子就能看到完整的图像（而不是几行像素这样一个子集），但是是非常低的分辨率。即而，使用逐渐提高扫描质量的连续阶段来替换图像。这就好像你在调焦一个望远镜，图像在每一个阶段获得越来越多的细节直到完全下载。


PNG：下一步的进展

1995年，当GIF格式所使用的LZW压缩算法的所有者Unisys公司和GIF的许可证发布者CompuServe公司做出决定，使用GIF的程序需要支付版税时，一场关于GIF使用的论战发爆发了。这场论战引发了新的改良的格式PNG（可移植网络图形）的出现。PNG由一个不正式的Internet工作组开发，并在1996年被W3C采用。PNG被设计成达到或超越GIF的性能，容易被实现以及充分可移植。它不需要支付版税，而且源代码完全公开。该规范在1998年被升级为1.1版，带来了gamma和色彩修正以及净化等关键特性。

PNG支持索引色、48位真彩色图像、16位灰度级图像以及一种相当先进的二维隔行方式，称为Adam7，它分7个阶段逐渐显示图像，比GIF使用的4阶段方式强大得多。结果是，逐级PNG显示得更快，比隔行GIF更快地被读取。

PNG的优势不仅体现在对颜色和像素类型的支持，PNG还支持真彩和灰度级图像的Alpha通道透明度。Alpha通道允许你设置图像中每一个像素的透明度级别，这意味着你可以建立部分或完全透明的五彩缤纷的图像。对于使用索引色的图像，透明度信息被附加在颜色选项板每个颜色上，这样你能得到Alpha通道的好处，而不用每个像素的操作。

为了精确显示色彩，PNG支持gamma修正和色品。使用了gamma值，浏览器就能按照作者本意使用颜色和光效来显示图片。色品代表了图像像素RGB色彩的强度，当与gamma修正组合时，色品值就能进行更精确的颜色匹配。

另外，PNG使用过滤和先进的压缩算法支持无损压缩。从原理上讲，该项工作运作的过程是这样的：在图像被压缩之前，先应用过滤来优化图像数据。由于这些过滤是逐行应用的，因此图像的每一行能够被独立优化。之后，图像使用在Zip、Gzip和其它一些流行的压缩程序中使用的LZ77算法的派生算法进行压缩。其结果是高的压缩比，但是并不损失数据。

尽管PNG有许多诱人的特性，它还不能取代GIF或JPEG。缺少主流浏览器的支持以及对不兼容的浏览器的替代格式是阻碍该格式广泛应用的关键因素。幸运的是，这些因素很快就不存在了。PNG受到了Microsoft Internet Explorer 4.0和Netscape Navigator 4.04正式认可。（在这之前，PNG仅由插件来支持。）尽管在这些浏览器中的支持只限于标准的特性和逐级显示，但是IE5.0和Navagator5.0应该支持全部的PNG特性。部分的支持是通过使用HTML4.0 的对象标签来显示PNG图像。该对象标签提供一种可行的方式来为不兼容的浏览器提供替换的图像类型。随着5.0版浏览器的面市，PNG终于可以扬眉吐气了。我们将拭目以待，看看在Web图形下一次进步到来之前，PNG是否还有新的进展。


告别位图时代

尽管位图很受欢迎，但是它还是有许多的缺点。你被束缚在了图像的每一个数据位上了。一旦文件被建立起来了，它就永久地固化了。如果你需要修改图像中的文本或是其它的元素你需要重新建立它们。你很难改变一个位图的大小：其结果往往是图像模糊不清或者有锯齿的边缘。打印位图也会出现麻烦。屏幕上看起来不错的图形，打印出来就未必好，特别是当两者的尺寸不同时。也许是最为致命的，考虑到Web的因素，位图实在太大了，需要很长的时间下载。

迎接矢量图形是摆脱位图对Web束缚的解决方法。矢量图形抛弃了跟踪和纪录数据位信息，而是使用了画线和填充指令。仅仅几个指令就可以代替好几K字节的点阵图像。

正如你所知，矢量图形不是新近才出现的。它们被广泛的用来在图形程序中建立图表同时也被浏览器的插件所支持。但是最新的为Web设计的矢量格式有些不同。

大多数传统的矢量图形依靠私有的格式并且没有一个统一的标准；与之形成对照的是，应用于Web的格式是有统一标准的而且是非私有的的格式就像标记语言一样。如果你熟悉标记语言，你就会知道标记语言是使用纯文本来定义标签和其它的元素的。基于文本标记消除了位图的缺憾。出版者可以手工更新标记或者在页面被浏览时进行动态更新，并不需要在编辑器中重新建立图像。这意味着你可以随心所欲地改变字体、颜色和其它的图像属性。矢量图形可以被伸缩，这意味着你可以在浏览和打印时改变它们的大小。

基于标记语言的另一个主要的好处就是图形内容可以被选择、索引和搜索。矢量图形中的文本可以被链接到其它的元素，如果单击它们你会受到新的信息。搜索引擎可以索引矢量图形的文本内容，使用户可以搜寻到图表、流程图和示意图等内的文本。

可惜的是，为Web设计的矢量图形对于现在的Web发展的黄金时段来说还未准备就绪，这主要是因为迄今为止，尽管有许多标准被提出，但是还没有单一的标准存在，最新的主流浏览器的组件还没有实现统一的标准。关于Web的矢量格式，不断有新的概念提出，总是有革新的潮流。许多公司都积极竞争希望它们的方案被选为Web的标准。支持的格式包括Web图表、DrawML、PGML和VML。

Web图表是建立流程图和其它图表类型的标记语言。做为它的核心，Web图表使用HTML和CSS1中定义的渲染和表达模块来寻求一种内建于Adobe FrameMaker和Microsoft Word等文档生成系统的基本绘图工具的重绘图表的能力。这意味着你应该能通过绘制线条、矩形、多边形、弓形和其它形状来实现填充图样、钢笔图样和线条图样。

类此于Web图表，DrawML也是一种建立流程图和图表的标记语言。只是Web图表依靠HTML和CSS而DrawML是XML（扩展标记语言）应用，它拓展了Java的应用来定义绘制于屏幕的图形。使用Java，DrawML能使用相对较少的描述指令来建立复杂的图表。其易用性的一个关键因素是所有DrawML具有作为连接点使用的“钩位置”。为了将物体连接在一起，你只需要告诉渲染程序哪些物体需要附着以及哪些钩位置需要使用。

PGML（精确图形描述语言），由Adobe System 公司提议，使得Web开发者可以在基本的图表幕后工作，这是因为该语言被设计产生像图表和表格那样非常精确的渲染图形。PGML的强大功能来源于Adobe的PostScript和PDF（可移植文档格式）图像模块。PGML是XML的应用，但是它的图形模块却是资源描述框架（PDF）数据模块的实例。在应用该模块中，Adobe提出了许多的增强特性，包括支持透明度、逐级显示和抗锯齿以及记录动画和动态行为的关键点。

Microsoft所拥有的矢量图形格式叫做VML（矢量标记语言）。VML是XML的一个应用，使用CSS2（级联样式表第二级）在文档中放置图形。Microsoft将VML设计成易于手工编辑。大多数的标记标签和属性具有短小的描述性的关键词，更为重要的是这些关键词具有判断力。VML可以使用标准的图像技术，诸如透明度、gamma修正和色品。VML也支持动画、脚本和使用数学公式的复杂图像渲染。在许多情况下，VML回归传统的方式来获得核心特性。举例来说，虽然VML支持超级链接，但是它不定义用户界面行为，取而代之的是，VML依靠标准的HTML机制来控制浏览的行为。


可缩放矢量图形

每一种竞争的格式都有其过人的长处。然而，W3C决定建立它自己的矢量图形格式：可缩放矢量图形（SVG）。SVG是XML的一个应用，支持CSS2和其它一些关键技术。SVG的开发者明白可打印的颜色范围和屏幕上可见的颜色范围是不同的。因此，他们将SVG的颜色匹配能力建立于色移的概念之上，它是输出设备所能支持的颜色范围。SVG通过使用gamma值和颜色预设支持gamma修正和色品。

由于SVG是位于XML名称作用域之内，因此SVG图形可以在包含其它XML标签的文档里面被定义，而没有意外的名称作用域的冲突。SVG也被设计为独立的文档格式。在这种情况下，SVG文件描绘完整的绘画、表格或图表以及可以包含到其它部分的链接。

SVG有许多的先进的特性，比如在Web应用上有关键革新的滤镜、交互性和动画效果。举例来说，SVG的滤镜效果是使用一种基于在点阵图形中如何产生良好效果的增强的转换技术来实现的。传统的矢量图形通过在单相的几何变换产生的描述和渲染来抽象确定的。SVG在转换过程中增加了步骤，凭此图形被渲染为连续的中间图像，然后被应用滤镜渲染输出到输出设备。这个多相的过程能够产生眩目的效果，比如具有3D外观的2D图像。

SVG建立者的一个关键目标就是尽快使之称为投入使用的标准。不像大多数规格那样要等上一年或更长的时间来看到进展，SVG有一个快速的时间表。W3C在1998年晚些时候开始SVG的工作，在当年的十一月份提出了需求表。在1999年二月之前，W3C就已经发表了以使SVG在七月之前被推荐为目的的工作草案。幸运的话，这个新的标准将不久带给Web的开发者一个新的建立赏心悦目网站的工具。