基础图形学概念：位图 vs 矢量图

基础图形学概念 位图 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 处理照片背景。