像素畫該匯出 PNG 還是 SVG？

PNG 和 SVG 可以顯示相同的像素圖稿，但它們解決不同的問題。 PNG 儲存彩色像素。 SVG 儲存繪製形狀的指令。

若要實現最快速的共享，請選擇 PNG。對於靈活的縮放和網頁佈局，SVG 是更好的選擇。

當 PNG 是最簡單的答案時

PNG 得到廣泛支援且可預測。社群平台、聊天應用程式、遊戲引擎、圖片編輯器和內容系統都理解它。

在以下情況下選擇 PNG：

• 您正在上傳頭像或社群圖片；
• 遊戲引擎需要紋理；
• 你需要透明像素；
• 其他人將在點陣應用程式中編輯文件；
• 最終尺寸已知。

PNG 是無損的，因此它不會在硬像素邊緣周圍添加 JPEG 樣式的振鈴。

主要風險是規模擴大。如果以 350×350 顯示 128×128 PNG，插值可能會軟化網格。在軟體允許的情況下使用整數縮放和最近鄰渲染。

當 SVG 更有用時

SVG 是一種向量格式。像素畫 SVG 通常將每個色塊表示為清晰的矩形。瀏覽器會依照請求的大小重新繪製這些形狀。

在以下情況下選擇 SVG：

• 同一件藝術品必須以多種尺寸出現；
• 您將其放置在響應式網站中；
• 您需要一個清晰的大幅面輸出來源；
• 藝術品的塊數和顏色數量適中；
• 您想要在向量編輯器中檢查或修改形狀。

SVG 也與 HTML 和 CSS 自然整合。但並非所有社群平台或遊戲管道都接受它。

檔案大小取決於藝術品

SVG 並不總是較小。詳細的轉換可以包含許多矩形，從而產生比壓縮 PNG 更大的檔案。具有大平面區域的簡單圖示可能像 SVG 一樣小。

測試兩者而不是依賴格式民間傳說。

作為一個粗略的模式：

• 小型、簡單、平面的藝術作品通常更青睞 SVG；
• 詳細或高解析度的藝術作品通常更青睞 PNG；
• 類似照片的像素轉換通常會產生繁忙的 SVG 標記。

透明度和邊緣

兩種格式都可以保留透明背景。 PNG 儲存每個像素的 alpha 值。 SVG 可將區域留空或為形狀指定不透明度。

對於經典的像素畫，喜歡完全不透明的塊加上完全透明的空間。當圖稿在淺色和深色背景之間移動時，半透明邊緣像素會產生光暈。

我從 PixelTool 匯出的內容

我的預設工作流程很簡單：

1. 使用 PNG 作為直接的最終資源。
2. 將 SVG 儲存為彈性副本，以便稍後調整設計大小。
3. 在實際顯示尺寸下測試 PNG。
4. 在目標瀏覽器或設計應用程式中開啟 SVG。

PixelTool 從相同的像素網格產生兩種格式，因此您可以比較它們而無需重建圖片。

快速決策表

使用情境	建議格式
社群頭像或貼文	PNG
遊戲材質或 Sprite	PNG
響應式網站裝飾	SVG
簡單圖稿的大尺寸列印	SVG
最大相容性	PNG
後續向量編輯	SVG

沒有必要永遠選擇一種格式。保留與目前交付管道相符的格式，並在幾乎不需要花費任何費用時保留其他格式。