圖片和照片 · 瀏覽器圖片和繪圖編輯器

光柵圖形與向量圖形：為什麼照片上的圖畫變成像素

2026年5月17日 · 背景

圖片編輯帆布瀏覽器處理

光柵影像是像素網格；向量圖形是繪製形狀的指令。這篇文章解釋了其中的區別，為什麼照片只能是光柵，以及為什麼您在其上繪製的任何內容在匯出時都會繼承相同的命運。

標誌變得模糊，照片永遠無法「向量化」——兩個日常困惑，一個解釋

模糊的標誌和帶註釋的照片經常被歸咎於同一個問題，但它們最初是不同種類的材料。向量標誌是一組路徑、筆觸和填滿的指令；照片是採樣顏色的有限區域。編輯器將照片作為畫布大小的光柵位圖打開，因此在繪製線條或矩形之前，其工作世界已經是像素網格。

在照片上畫一個框，將其匯出，然後放大邊緣。結果是一個光柵圖片，其註釋佔據照片旁邊的像素。將該檔案與具有更大顯示尺寸的原始 SVG 進行比較，可以看到差異：放大匯出會重新取樣其網格，而放大 SVG 會重新計算其路徑。該編輯器不會將第一個物件變成第二個物件。

光柵影像記錄網格中位置的顏色。 PNG、JPEG 和 WebP 的編碼和壓縮方式有所不同，但匯出的圖片在顯示時仍會解析為像素。單像素邊界、抗鋸齒曲線和小標題都是最終影像中的有限樣本。向上擴展檔案需要插值過程來估計額外的樣本；它不會恢復原始繪圖指令。

當註解必須在多種尺寸下保持清晰時，此限制很重要。用於一個固定顯示器的螢幕截圖註解可以完全正確地作為光柵匯出，而用於標誌、印刷品和多個介面的品牌標記通常應作為向量資源保留。使用合成影像的編輯器，而不是取代必須獨立縮放的來源圖稿。

向量描述幾何形狀，而不是儲存每個顯示的像素。 SVG 路徑可以指定曲線、描邊寬度、填滿和變換；然後渲染器計算適合目前大小的像素。這就是為什麼相同的簡單標記在放置在多個維度時可以保持乾淨的原因。該解釋是格式級背景，而不是聲稱該編輯器發出或保留此類指令。

瀏覽器編輯器暫時使用線條和形狀手勢的幾何訊息，這使得預覽在發布前跟隨指標。手勢完成後，結果將繪製到光柵圖層中。 Export 合成可見圖層並為 PNG、JPEG 或 WebP 呼叫 canvas.toBlob。此路徑中沒有 SVG 匯出或向量項目文件，因此幾何圖形不會作為獨立物件存在。

照片是光柵材料，因為相機記錄穿過感測器的光樣本並將這些樣本儲存為影像資料。將照片描述為向量需要一種解釋，用發明的形狀取代其紋理、雜訊、陰影和不規則細節。以不同方式升級或匯出可能會變更網格，但這兩種操作都不會變更原始擷取包含的資訊類型。

這種差異也解釋了為什麼照片和標誌可以在一次編輯中共存，而不會成為同一件事。徽標可能在其他地方作為向量開始，但在此編輯器中將其繪製到光柵照片上後，組合結果是像素網格。當將來重複使用時，請單獨保留原始徽標，並將瀏覽器匯出視為目前用途的成品圖片。

在手勢期間，線條和形狀工具的行為類似於緊湊的幾何指令：編輯者知道起點、終點、輪廓和當前預覽。發布後，這些指令將渲染到柵格圖層中。畫筆標記在製作時就是光柵塗料，並在放置時文字被光柵化，而不是保留為可移動文字物件。因此，該會話提供了便利，但不承諾以後的物件級可編輯性。

匯出使邊界變得明確。可見柵格圖層合成到一張畫布中，然後透過瀏覽器編碼為 PNG、JPEG 或 WebP。重新開啟該檔案會顯示照片並標記為普通像素；它不會為收件者提供可選擇的矩形、可重複使用的路徑或可編輯的標題。如果您可能需要更改註釋而不僅僅是共享圖片，請保留分層會話或來源資源。

當標記本身必須移動時選擇向量資源：標誌需要多種尺寸，圖表可能需要修改，或符號必須放置在多個背景上。當目標是準備共享的螢幕截圖、帶有標註的校樣或包含可見註釋的照片時，請選擇光柵匯出。正確的決定取決於下次使用，而不是相信一種格式總是優越的。

瀏覽器影像和繪圖編輯器適合第二類。它可以在照片上放置畫筆、線條、矩形、橢圓和光柵文字標記，然後將合成匯出為光柵檔案。它無法輸出 SVG 或保留向量物件模型。如果客戶要求將徽標作為獨立資產，請返回原始向量來源，而不是從編輯後的像素中提取更大的版本。

可靠的心智模型很簡單：編輯器可以使用幾何圖形來描述手勢，但檔案及其匯出是光柵影像。每個開啟的照片和編輯器圖層都有一個有限的像素網格。放大此網格會對現有資訊進行重新取樣，並將可見圖層匯出到另一個柵格。此工作流程中的任何步驟都不會從已變成像素的線條建立可重複使用的向量路徑。

在繪製之前檢查檔案類型和預期收件者。如果接收者需要查看完成的圖片，請匯出光柵並以實際顯示尺寸檢查其邊緣。如果接收者需要編輯標記、重新著色標誌或重複縮放圖稿，請提供適當的向量或分層來源。這種區別可以防止技術上有效的匯出被誤認為是不同類型的可交付成果。