向量與圖形運算2026-10-06
SVG 向量圖點陣化 (Rasterization) 邊緣模糊解密與高解析度匯出指南
解開向量圖轉成 PNG 後文字毛邊、線條模糊的成因。掌握設備像素比 (DevicePixelRatio)、ViewBox 視口設定與超採樣抗鋸齒技巧。
SVG 擁有在任何螢幕縮放下皆 100% 銳利無失真的無敵特性。然而，在社群分享（如 Facebook、Twitter Open Graph）或簡報軟體中，常常必須將 SVG 轉為通用的 PNG 或 JPG。令人沮喪的是，許多線上轉檔工具產出的 PNG 往往字體毛糙、線條發虛。本文為您解析點陣化 (Rasterization) 的陷阱與完美高解析匯出解法。
一、為什麼「向量」轉「點陣」會發生模糊？
SVG 是由數學公式（貝茲曲線、路徑 Path、幾何座標）所組成的代碼，本身沒有「實體像素」的概念。
當您將 SVG 繪製至 HTML5 Canvas 轉為點陣圖時，瀏覽器必須進行「光柵化 (Rasterization)」，將無限細膩的數學曲線強制對齊到固定的像素格點上。若在轉換時未正確指定目標寬高或忽略了現代高解析螢幕 (Retina / 2x / 3x) 的物理像素密度，畫面就會被強制以低解析度拉伸，造成慘不忍睹的模糊邊緣。
ViewBox 關鍵：SVG 標籤中必須具備標準的 viewBox 屬性，渲染引擎才能自適應任意高倍率縮放。
二、設備像素比 (DevicePixelRatio) 與超採樣渲染
在現代 MacBook 或旗艦手機上，1 個 CSS 邏輯像素通常對應著 2 個甚至 3 個物理發光像素。若您直接以 1:1 的邏輯尺寸點陣化，輸出的 PNG 在這些螢幕上看起來解析度只有一半！
業界最佳實踐是採用「超採樣 (Supersampling)」技術：
1. 讀取 SVG 原始比例。
2. 將內部離線 Canvas 畫布尺寸放大為目標尺寸的 2x 到 4x。
3. 在高密度格點上進行繪製與色彩過濾。
4. 產出超高清晰度 (Ultra HD) 的 PNG，徹底杜絕毛邊。
三、透明背景與色彩邊界過渡處理
SVG 經常帶有複雜的半透明漸層與陰影 (Drop Shadow)。在點陣化為 PNG 時，必須啟用高品質雙線性插值 (Bilinear Interpolation) 與平滑抗鋸齒 (Anti-aliasing)。
OmniConvert 在轉換管線中自動套用預乘 Alpha (Premultiplied Alpha) 修正，避免半透明邊緣在透明轉不透明背景時產生難看的黑色或灰色光暈。
規格與效能完整對照表
| 轉檔方式 | 線條邊緣銳利度 | 文字可讀性 | 高解析螢幕表現 | 產出檔案大小 |
|---|---|---|---|---|
| 低階 1x 預設點陣化 | 毛糙、邊緣鋸齒明顯 | 小字模糊不清 | 模糊發虛 (Blurry) | 極小 (<50KB) |
| 超採樣 2x~4x 點陣化 (OmniConvert) | 極度銳利、微米級精準 | 文字如原生印刷般清晰 | Retina 螢幕完美呈現 | 合理緊湊 (100KB~300KB) |
| 原生 SVG (不轉換) | 理論無限清晰 | 向量級完美 | 完美適配任何螢幕 | 代碼體積最小 |
相關熱門問題解答 (Q&A)
Q:為什麼有些含有外部字型的 SVG 轉成圖片後字型變成了新細明體？
若 SVG 依賴外部 CSS 網頁字型（如 Google Fonts），在離線 Canvas 繪製時因為缺乏本機字型環境會觸發回退。建議在匯出前將向量文字轉為路徑 (Convert Text to Outline/Path)。
Q:OmniConvert 支援將 SVG 轉為帶透明背景的 PNG 嗎？
完全支援！OmniConvert 會保留原生 SVG 的透明圖層，並使用 UPNG 引擎進行高畫質 Alpha 封裝。
總結與建議
向量轉點陣不該向畫質妥協。掌握超採樣解析度倍率與視口幾何，OmniConvert 讓您的向量設計圖完美蛻變為高解析度、邊緣銳利無比的專業 PNG 圖像。
#SVG轉PNG#向量圖#點陣化#Retina高解析#Canvas繪圖