SVG 適合縮放與工程化，上線仍常要 PNG 點陣包。2026 年交付裡，真正決定清晰的是輸出像素＝邏輯像素×倍率，而不是口頭上的「高 DPI」。本文以對照表收口 sRGB／Display P3 選型、@2x／@3x 與常用 DPI 中繼資料口徑，並整理設計工具與 CLI 參數思路，以及遠端 Mac M4 批處理驗收清單。若團隊剛從純向量切到多倍率點陣，建議把「像素契約」寫進 README，讓前端與素材崗用同一套數字說話。
① 色彩空間決策對照表
與Mac PNG 色彩管理與 sRGB／P3 驗收清單一致：團隊要寫清「母版空間」與「分發空間」。下表用於SVG→PNG 柵格化拍板。
| 情境 | 建議匯出色彩 | 母版建議 | 選錯的風險 |
|---|---|---|---|
| Web／小程式／多數營運版位 | sRGB 8 位元 PNG | 可在 P3 螢幕創作，匯出前轉換為 sRGB | 僅改 ICC 標籤、不轉換 → 他機飽和異常或發灰 |
| 品牌主視覺、需保留廣色域的專題包 | 單獨約定 Display P3 目錄＋清單聲明 | 保留 P3 源 SVG／設計稿 | 與預設 sRGB 包混裝 → 前端引用錯目錄 |
| iOS 切圖與 App 內資源 | 通常 sRGB；依團隊 HIG 文件 | 對齊iOS 圖示與 PNG 交付矩陣 | 漏 @3x 或色域與審核素材不一致 |
| 印刷導出的螢幕預覽 PNG（非印刷 TIFF） | sRGB 預覽＋印刷走 CMYK 專線 | 勿把 300 DPI 預覽當唯一真理源 | 混淆螢幕倍率與印刷加網 |
② 邏輯像素、倍率與 DPI 對應關係
記牢：倍率乘在寬高像素上。下表以邏輯寬 W、邏輯高 H（pt 或 CSS px）為例；DPI 欄為常見寫入中繼資料的示意（72／96 基準下 @2x 常對應 144／192 等），便於與習慣說法對齊，但驗收仍以像素為準。
| 資源後綴／倍率 | PNG 像素（寬×高） | 常用 DPI 中繼資料口徑（示意） | 驗收口訣 |
|---|---|---|---|
| 基準 @1x | W × H |
72 或 96（依工具預設） | 與標註邏輯尺寸一致 |
| @2x | (W×2) × (H×2) |
常寫 144（72×2）或 192（96×2） | 寬高皆為 1x 的整數倍 |
| @3x | (W×3) × (H×3) |
常寫 216 或 288 | 同上，且與工程命名一致 |
若 SVG 僅含 viewBox 而無絕對寬高，先在源檔約定「設計基準寬度」（或匯出命令裡指定目標寬），再依倍率產生多套 PNG，避免同一圖示在不同腳本裡算出不同邏輯像素。大批量夜間匯出可與遠端 Mac M4 批量匯出 4K PNG的佇列策略類比（切片策略不同，但「固定版本＋manifest」相同）。
③ 設計軟體與批量腳本參數要點
與Affinity／Sketch／Figma 批量 PNG 工作流銜接時，把 SVG 當中間格式或從元件直接匯出，關鍵是匯出寬／高＝邏輯尺寸×倍率，色彩選 sRGB（除非走 P3 專包）。
| 方式 | 參數思路 | 適用 |
|---|---|---|
| Figma／Sketch | 匯出面板選 PNG＋倍率（2x、3x）或自訂「w×倍率」；色彩配置選 sRGB | 元件化 UI、需與稿一致的效果 |
| Affinity Designer／Photo | 開啟 SVG → 匯出尺寸依像素鎖定 → 執行「轉換為描述檔」到 sRGB 再批量 | 複雜漸層、需與印刷稿同源 |
| Adobe Illustrator | 資源匯出或腳本化匯出：以像素為單位設寬高；色彩同步到 sRGB 配置 | 大量畫板、動作／腳本成熟團隊 |
| Inkscape CLI | inkscape file.svg --export-type=png --export-width=<W×scale>（或高度鎖定其一防變形） |
無頭批處理、可重複建置 |
| rsvg-convert（librsvg） | rsvg-convert -w $((W*scale)) -o out.png in.svg；固定版本與字型 |
輕量、易塞進 CI／launchd |
與 PDF 柵格化對照時可讀PDF 轉 PNG 的 DPI 與色彩清單；二者共通點是先定像素，再談 DPI。
④ 遠端 Mac M4 批處理驗收清單
在遠端 Mac上固定小版本、字型與 CLI 版本後，依表勾選（可列印為工單附件）。
| 檢查項 | 操作 | 通過標準 |
|---|---|---|
| 像素契約 | 腳本或 sips -g pixelWidth -g pixelHeight 抽檢 |
等於「邏輯 W／H × 對應倍率」，允許清單寫明 ±0 |
| 倍率命名 | 核對 @2x @3x 或目錄約定 |
與前端 srcset／Xcode 資源規則一致 |
| 透明與邊緣 | 在 #FFF／#0B0B0B 底預覽 | 無意外色暈、無半透雜色 |
| 色彩意圖 | 抽檢嵌入 ICC 或剝離策略 | 與 README-color 一致；sRGB 包無「假 P3」 |
| 可複現性 | 另一台同版本遠端機重跑同輸入 | 像素級一致或差異在文件說明的容差內（如抗鋸齒） |
| 失敗重跑 | manifest 記錄失敗路徑 | 可單檔重試，不整批重洗 |
⑤ FAQ
結構化版本見頁首 FAQPage JSON-LD。正文速覽：
問：只把 DPI 改成 300 會更清晰嗎？ 答：若像素沒變，多數 Web 情境不會更清晰；要加的是寬高像素。
問：SVG 裡用了系統字型，遠端批處理跑版了？ 答：柵格前請外框化文字或保證遠端 Mac 安裝同族字型，否則換行與字距會偏。
問：@2x 與 @3x 能否共用同一套縮放腳本？ 答：可以，迴圈 scale=2、3 各寫一行 manifest；注意不要對 @3x 再二次縮小冒充 @2x，以免柔化。
小結與下一步
SVG 批成 PNG 的 2026 交付口徑：用邏輯×倍率鎖像素，用sRGB 預設分發、Display P3 單獨成包；遠端Mac上固定工具鏈並依表驗收。需要統一環境與夜間佇列的團隊，可從首頁了解方案，至方案與購買選型，並免登入查閱說明與連線指南完成接入。延伸閱讀：技術見解列表。
遠端 Mac「設計場景」方案
將 SVG → @2x／@3x PNG 批量任務放在固定遠端 Mac M4上，可減少本機休眠打斷與版本漂移。以下入口皆無需登入即可瀏覽。