位图(Bitmap)由像素组成,放大到一定程度会出现锯齿与模糊;矢量图(Vector)由路径/数学曲线组成,理论上可无限缩放而不失真。两者没有谁更高级,关键是用途不同。
你手机拍的照片、网页上的大部分图片都是位图。它们的“清晰度”主要由像素尺寸决定,比如 4000×3000 像素的照片细节更多。位图适合表现复杂纹理和真实光影,但放大后会出现像素块。
矢量图用点、线、曲线、填充、描边来描述图形。图标、Logo、简单插画、UI 里的图形元素非常适合用矢量,因为缩放、改色、改形都更方便,而且边缘永远干净。
如果原图本身是位图,直接“另存为 SVG”并不会 magically 变成矢量,它只是把位图嵌进了 SVG 容器里。真正的矢量化需要重新描路径(手动绘制或矢量化工具追踪)。
矢量文件在图形简单时很小,但如果形状非常复杂、节点很多,矢量也可能很大。反过来,位图经过合适压缩(JPEG/WebP)也能非常小。体积大小取决于内容复杂度与压缩方式。
高分辨率位图只是像素更多,不代表它是矢量。再大的位图放大到足够极端仍会失真;矢量则是缩放不失真的“表达方式”不同。
位图常见:JPG/JPEG、PNG、WebP、GIF
矢量常见:SVG、AI、EPS、PDF(可包含矢量内容)
1)做 Logo/图标/可变色图形:优先矢量(SVG/AI)
2)照片/复杂纹理:优先位图(JPEG/WebP)
3)印刷:矢量更稳(文字与线条更清晰),但照片部分仍是位图
4)网页:图标用 SVG,图片用 WebP/JPEG,能兼顾清晰与加载速度
位图负责“真实细节”,矢量负责“清晰形状”。把它们用在对的位置,你的文件更轻、出图更稳、交付也更少返工。