译文一篇，图标设计-位图和矢量图的对决

Icon Design-Bitmap vs Vector

*Firewheel Design

译：GYF

Here at Firewheel, we create a boatload of icons, and one of the most common questions we get asked about icon design is,“Why do you deliver your icons individually sized in PNG or GIF files, when a single vector file like SVG or EPS can be made any size we desire?”

在火轮工作室，我们做过很多很多的图标。一个最常被问及的关于图标设计的问题是：”为什么你们用独个的PNG或者GIF文件导出图标呢？一个SVG或者EPS矢量文件不就能够设计成任意大小吗？”

While the answer is a technical one, it’s not too difficult to understand. But before we get started, we should brush up on the general differences between bitmap and vector file formats.

答案是一个技术性的，不太难懂。然而在我们开始之前。我们应该复习一下位图和矢量文件格式的大致区别。

A bitmap image file (such as GIF, PNG, TIFF, etc.) is comprised of pixel-based image information. Pixels, for the uninitiated, are the tiny little squares of light that make up your computer screen. The word pixel itself is an abbreviated form of the words “picture element.” The little square pixels of light are extremely easy to see with the naked eye on an LCD flat panel monitor if you have one. A 24×24 pixel icon representing a red square would be comprised of 576 individual red pixels, each represented by little bits of numeric data in an image file. A larger image requires more pixels, leading to more numeric information, and thus a larger file size.

一个位图文件（如GIF,PNG,TIFF等）由基于像素的图形信息组成。像素，用外行的话讲，是组成你的电脑屏幕的一块块光点。单词pixel是“picture element”的缩写形式。这一小块光的像素用肉眼在液晶显示器上很容易看到。一个24×24 的像素图标呈现出一块红色，它由576个单独的红色像素组成，每一个像素代表着图象中的一个小小的数据单元。大的图像要求有更多的像素，也就意味着更多的数字信息、更大的文件。

A vector image file (such as EPS, SVG, etc.) is comprised of geometric, mathematical-based information. A vector image file containing a red square scaled to 24×24 pixels would simply contain numeric information regarding the mathematical location of the square’s four corners, information about the color the square is filled with, and information defining the size of the square as 24×24 pixels on screen. Basically our red square vector file only needs about six little bits of information as opposed to our 576 bits of information required for our bitmap red square.

一个矢量文件（如EPS,SVG,等）是由几何级的数字信息构成的。一个包含24×24大小红色像素的矢量文件，只包含一些数字信息，代表四边形的四个角的几何位置，代表四边形所填充的颜色以及定义屏幕上24×24 像素的尺寸大小。基本上我们的红色平面矢量文件只需要大概6个字节的信息就够了，而位图需要576个。

In reality, the explanation is a bit more complicated than this, but you get the gist: Changing the size of a vector image file from 24×24 to 48×48 simply requires the editing of one bit of data (the size). The math does the rest. However, changing the size of a bitmap image file from 24×24 requires the addition of 1728 more pixels, resulting in a larger file size.

实际上，情况要比这个复杂一点，但是记住要点：把一个尺寸大小为24×24的矢量图文件更换成48×48的，只需要简单的编辑一个字节数据就行了（尺寸），剩下的交给计算机去办。然而，要把一个24×24的位图文件变得那么大需要增加1728个像素，从而导致文件更大。

Thus a single vector file may used to represent it’s image at multiple sizes, whereas a bitmap image may only accurately represent its single pre-determined pixel size.

这样的话，一个矢量文件可以表示不同尺寸的图像，而位图只能单独地表现预定像素的尺寸。

So if a vector file format can scale and shrink to represent any size it so desires, why does Firewheel Design insist on drawing new artwork for each icon size we deliver to a client? It’s simple, really: Relativity.

如果一个矢量格式文件按比例缩放到任何它能显示的尺寸，在我们交付给客户时，为什么Firewheel Design坚持把每个尺寸的图标都重新绘制？这很简单：相对性。

图1.1

Let’s look at the printer icons above. The top row consists of four individually drawn bitmap icons, each of the same subject, each delivered at a different size. The bottom row consists of a single vector icon, originally sized at 24×24 pixels, then scaled mathematically to the other sizes shown.

让我们一起看看上面的打印机图标。上面那组是由四个单独画的位图图标，每个是同样的主题，输出时大小不同。下面那排仅由个单独的矢量文件生成，原始尺寸是24×24，然后按精确比例表示其它尺寸。

Notice a difference? I thought you would. In the top row, each icon is crisp and the 1-pixel lines are sharply defined. In the bottom row, only the master vector file (originally created at 24×24) is crisp. The other three sizes are blurry.

注意到区别了吗？我想你们都看到了。上面那排每一个图像都是清晰的，每一像素的线都是锐利精准的。下面那排，只有原始的矢量图(由原始的24×24产生)是清晰的。但其它三个尺寸是模糊的。

“Why is this?” you ask. “I thought vector files could scale big and small and far and wide, and still retain their image quality.” Well, technically they do. But there’s a weakness in using vector files, and this weakness becomes more apparent at small sizes. Especially sizes under 48×48 pixels. The weakness is that computer monitors are still inherently pixel-based (that is to say, bitmap-based) displays.

“为什么会这样？”你也许会问。“我认为矢量的图能够按比例放大和缩小，变长，变宽，也能保证质量。”从理论上讲是这样，但是使用矢量图有一个缺陷，而且当尺寸变小时，特别是当尺寸低于48×48时，这个缺陷变得更明显。电脑显示器固有的像素显示（也就是说，以位图为基础）是产生缺陷的原因。

When you take a vector image, originally sized at 24×24 and scale it down to 16×16, the relative proportions do not match. There’s no way you can evenly distribute 24 pixels of information into 16 pixels of space (remember, there’s no such thing as half a pixel). So the image blurs.

当你使用一个原始尺寸为24×24的矢量图，然后按比例缩小到16×16，相对的比例部分并不配对。你甚至不能将24像素的数据分散在16像素的空间上（记住，没有半个像素的存在）所以图像变模糊了。

There’s also no way you can evenly scale 24 pixels of information upwards into 32 pixels of space. Again, the image blurs.

同样道理，你不能将像素为24×24的信息按比例增大为32像素的大小。图像还是模糊。

Furthermore, if you take that same vector image, originally sized at 24×24 and scale it up to 48×48, you’re now doubling the proportions. You no longer have crisp 1-pixel lines. You have chunky 2-pixel lines. Scale it up larger (say to 96×96) and those lines become even thicker.

此外，如果你用同样原始尺寸为24×24的矢量图，再把比例放至48×48，现在你会怀疑协调的问题。这样你不会有单一的一条像素线了，你会看到条粗大的像素线。再按比例放大（到96×96）,这些像素线变得更粗。

Now this is fine if you want Fisher Price icons, but not desirable if you’re looking for crisp and clean. And this is why we design each icon size to scale, instead of relying on a single vector file. It takes more time, and may cost a little more money, but we believe the results are worth it.

这对于你想要*费雪图标来说很好，但是你若要追求清晰和干净的图像，这样就不可取了。这就是为什么我们按比例设计每一个尺寸的图标，而不是仅仅依赖一个矢量图。当然这可能要多点时间，多花费一点点的费用，但我们相信结果是值得的。

There are a few caveats: First, if you’re working with larger icon sizes (say, above 48×48) you’re not going to notice the difference as much, and you may find the results acceptable. Second, your mileage will vary as you create different styles of artwork. The less-detailed your linework is, the less you will need to worry about this.

多几句嘴：第一，如果你用的是大图标（如大于48×48），你可能察觉不到明显的不同，而且你可能发现结果还可以接受。第二，差别体现在你使用不同风格的图稿时。你的线条细节越不详细，就越不用担心这个。

Now you know our process, our obsession with pixel-perfection, and why it takes a bit more work when you need more than one icon size. Vector artwork is wonderful, but it should not be relied upon as a silver bullet. For small icons, bitmap is the way to go.

现在你知道我们的工序、我们关于完善像素和当我们需要一个图标尺寸时为什么它需要更多的工作的困扰了。矢量图好是好，但是不能把它当作银子弹（杀手锏）。对于小图标，位图是很可取的。