基础图形学概念

位图 vs 矢量图 (Vector)

通过下方的互动演示,直观感受像素点阵与数学路径的本质区别。

缩放倍率: 1.0x
拖动滑块查看细节差异
位图 (Raster)
本质:像素方块的网格 (Grid of Pixels)
矢量图 (Vector)
本质:数学公式定义的路径 (Mathematical Paths)

位图技术详解

  • 构成原理:

    由称为“像素”的彩色方块组成的网格。每个像素包含特定的颜色信息(RGB值)。图像质量直接取决于分辨率(DPI/PPI)。

  • 色彩表现:

    非常擅长处理复杂的颜色渐变、阴影和细节。是照片写实绘画的唯一选择。

  • 常见格式:
    JPG PNG GIF TIFF WEBP

矢量图技术详解

  • 构成原理:

    基于数学公式(点、线、曲线)。例如绘制圆形是定义圆心坐标和半径 `r`,而非记录每个像素。因此可以无限放大而不失真。

  • 文件特性:

    文件大小通常很小(只存储指令),且与尺寸无关。但不擅长表现照片级的复杂色彩变化。

  • 常见格式:
    SVG AI EPS PDF
特性维度位图 (Raster)矢量图 (Vector)
分辨率依赖
依赖 (Dependent)
独立 (Independent)
文件大小
大 (高分辨率时)
极小 (简单图形时)
转换难度
难以转为矢量 (需要算法描摹)
极易转为位图 (栅格化)
最佳用途
照片、复杂绘画、纹理
Logo、图标、排版字体、插画
提示:现代网页设计中,通常使用 SVG 制作图标以保证在 Retina 屏幕上的清晰度,使用 WebP/JPG 处理照片背景。