RunToolz iconRunToolz
Welcome to RunToolz!
图片设计SVG

为什么你的Logo看起来模糊(光栅 vs 矢量)

矢量图形可以无限缩放而不失真,光栅图像则不行。详解SVG与PNG/JPEG的核心区别,帮你在Logo设计、网页图片和印刷品中做出正确选择。

RunToolz Team2026年1月11日4 min read

你把logo发给打印店。它在屏幕上看起来很清晰。打印版本看起来像是在MS Paint里做的。

问题:你发送了需要矢量的地方发送了光栅图像。

光栅图像:像素网格

JPEG、PNG、GIF——这些是光栅格式。它们将图像存储为彩色像素网格。

100x100像素的图像恰好有10,000个像素。放大到200x200,你在发明不存在的像素。结果:模糊或像素化。

光栅在预期尺寸下工作很好。放大,质量下降。

矢量图像:数学,不是像素

SVG、PDF、AI——这些是矢量格式。它们存储像"在这里画个圆"和"从A到B画条线"这样的指令。

将矢量缩放到任何尺寸,它重新计算。总是锐利。总是清晰。

想亲自试试吗?转换为矢量

何时使用矢量

Logo。 需要在每个尺寸——从图标到广告牌。矢量处理所有这些。

图标。 在设备上以各种尺寸出现的UI元素。

插图。 带纯色和明确形状的简单艺术作品。

打印材料。 任何以未知尺寸去打印店的东西。

何时使用光栅

照片。 数百万种颜色、渐变、复杂性。照片本质上是光栅的。

复杂艺术作品。 绘画纹理、详细渐变、自然图像。

截图。 捕获屏幕上的内容本质上基于像素。

网页照片。 JPEG压缩使照片适合网页传输。

转换现实

光栅转矢量很难。软件可以追踪边缘并近似形状,但复杂图像转换不好。带纯色的简单logo转换合理。照片不能有意义地转换。

矢量转光栅很容易。只需以目标尺寸导出。但一旦光栅化,你不能回到矢量而不重新创建它。

常见错误

使用光栅logo。 你的logo应该作为矢量存在(AI、SVG或PDF)。可以从中以任何需要的尺寸导出光栅版本。

截图矢量。 矢量文件的截图是光栅的。你需要实际的矢量文件,而不是它的图像。

过度矢量化。 不是所有东西都应该是矢量。照片和复杂图像不受益。

忽略源文件。 设计文件(Illustrator、Figma)是基于矢量的。导出为PNG失去那个。保留源文件。

实用工作流

  1. 以矢量格式创建原始艺术作品
  2. 永远保留矢量源文件
  3. 需要时以特定尺寸导出光栅版本
  4. 需要不同尺寸时从源重新导出

不要倒着工作。不要试图从你网站上矢量化光栅logo。找到或重新创建原始矢量。

文件格式快速指南

| 格式 | 类型 | 最适合 | |------|------|--------| | SVG | 矢量 | Web图形、图标 | | AI | 矢量 | 专业设计源文件 | | PDF | 矢量* | 文档、打印 | | PNG | 光栅 | 截图、透明度 | | JPEG | 光栅 | 照片 |

*PDF可以包含矢量和光栅内容。


矢量用于可扩展性。光栅用于照片。保留矢量原件并在需要时导出光栅。弄反会创建模糊的logo和沮丧的设计师。