基礎圖形學概念

點陣圖 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 處理照片背景。