想必大家都经历过想把一张图片不停放大但却最后止步于马赛克的情形，这张出自Wikipedia的图片显然最清楚的展示了这一情况。当然，这种情形只限于左边的jpeg/jpg, png, gif这几种格式，而右边的svg格式则丝毫不受此困扰。
这其中的道理在于常见的jpeg, gif, png这些格式都属于位图(bitmap)，也就是它们储存图片信息的方式是包含图片中各个点的三原色的信息。如果使用MatLab等类似软件来载入这些图片，也就可以看到其实这些图片存储的数据，就类似于{(1, 2):(0.9, 0.9, 0.9)}，也就意味着在位置(1, 2)这一点的rgb值分别对应0.9, 0.9, 0.9。当这些图片是小尺寸的时候，点与点之间虽然并不连续，但肉眼已无法分辨，所以并没有马赛克效应。但如果图片不断放大，当点与点之间的间隙也相应能被识别了，而与此同时，这些间隙所对应的点又没有相应的信息的时，只能将就着用一下相邻点所包含的rgb值，无形中就把一个点的信息放大到了一个小矩阵的，也就形成了上图左边的情况。
而SVG则基于不同的原理。从它的名字：矢量图形，就可以得到一些信息。比如画的若是一条直线，SVG只会记住首尾两端，然后生成的时候直接把两点相连即可，如果要按比例缩放，由于每次连线中间的点又是重新生成，所以不管放的多大，也不会出现马赛克的情况。当然，不仅仅是线条，矩形，椭圆等等规则形状，其实只要有耐心，或者数学水平高，任何图形也都是可以用直线等矢量所得，或者至少近似所得。所以比如看下面这张老虎，也完全是一张矢量图。不信，就不妨点击右键，看看能不能保存图片。｛你在下方将所看到的会如此图
，但是SVG格式，尺寸更大，如果使用IE无法察看，请使用
｝
从另一个角度来讲，SVG可以节省存储的功夫，但在重新生成整图时也会相应多消耗一些cpu的功夫。毕竟它就类似的只含有着一些节点的信息和节点间关联的方式、形状，需要一些处理之后才能还原回原图，而并不是像位图那样只要实实在在的呈现在哪个点包含哪些颜色就行。但显然这些小小的cpu的代价是远远值得的。这是因为，一：SVG其实可以用xml格式来保存，相比起一般的图片格式，要小很多，更利于网络传输(一般的xml还可以再压缩保存，也就意味着文件更小，而且一般浏览器，比如Firefox，不需解压就可以读取)。二，如果你有SVG编辑器，比如inkscape，就可以保存上面老虎的SVG文件，然后来输出你所想要的尺寸。尽管可以输出3000×4000，或者更大的文件，那个老虎看起来仍然会栩栩如生。
最后还有一个好处，也就是SVG作为XML，更容易与Javascript等一起结合使用，使得如今已如火如荼的Ajax技术就更是如虎添翼。比如下面这个为大家所熟悉的俄罗斯方块，也就是由SVG和Javascript编写而成的。点击进去，你就可以Online玩，你也完全可以把它单独存储为本地文件后，用Firefox打开即可。（最好在Firefox里使用）
最后再说一句，也就是SVG的应用其实已越来越广，至少在化学领域，绘画分子结构时，很多就可以存储为SVG格式，比如我最近用的bkchem。本文所提到的老虎和俄罗斯方块的出处，http://www.croczilla.com/svg/samples,也更是有着一些化学分子的SVG格式。
Post a Comment