幫一個開源小工具做圖示那次，我在這枚圖形上花了整整兩天：24×24 網格上一個圓角方框加一道弧線。原始檔是 SVG，我相當滿意，然後開始交付——小程式後台說不收 SVG，應用程式圖示要 1024×1024 的點陣圖，網頁的 manifest 要 192 和 512 兩份，文件裡的標誌又是另一套尺寸。最糟的是第一次轉出來的 32px 圖示，那道 1px 的弧線直接消失了，看上去像個方框缺了一角。點陣化這件事，真不是「改個副檔名」。
一、從向量到點陣圖，中間發生了什麼
SVG 存的是路徑、描邊寬度和顏色，瀏覽器拿到之後按目前顯示尺寸重新計算一遍；點陣圖存的是每個像素的顏色值。轉換的正式名稱叫點陣化：把你指定的寬高切成格子，逐格算出該填什麼色。所以輸出清不清楚，取決於你填進去的那兩個數字，跟 SVG 內部的 viewBox 是 24 還是 2400 沒有直接關係。
| SVG（向量） | PNG / JPG / WebP（點陣圖） | |
|---|---|---|
| 放大表現 | 路徑重算，邊緣始終乾淨 | 像素被插值，會發糊或出現鋸齒 |
| 體積 | 圖示這類簡單圖形通常幾 KB | 隨像素數量成長 |
| 誰能接收 | 瀏覽器、設計軟體 | 平台後台上傳位、系統圖示、幾乎所有場景 |
| 透明 | 支援 | PNG 支援；JPG 沒有透明通道，會被填成白底 |
| 可否改圖形 | 改程式碼就能改 | 只能重畫 |
二、我這份圖示最後交了哪些尺寸
- 1024×1024 PNG：母版，不帶圓角，四周留白按圖形寬度的 10% 留。
- 512×512 和 192×192 PNG：網頁 manifest 裡那兩檔。
- 64×64 和 32×32 PNG：網站分頁圖示、文件內嵌小圖。
- 1200×630 WebP：社群分享卡片底圖，品質我拉到 90%。
這張清單是我和後台提示一項一項對出來的。規則會變，每次交付前我都再核一遍，不指望記住。
至於那道 32px 上消失的弧線，我後來的解法是先往大匯出、再縮小：出 128×128，然後在自己的影像軟體裡縮到 32。原因是 SVG 裡 1px 的描邊落到 32px 的輸出網格上，連一個像素都佔不滿，點陣化只能把它抹平。
三、我實際轉一份的流程
- 先在SVG 圖片預覽裡確認算圖結果。有些 SVG 用了外部字型、CSS 變數或者
foreignObject，原始碼看著沒問題，瀏覽器裡根本不出現，這一步能提前發現。 - 把檔案放進SVG 轉換格式，選輸出格式，填目標寬高。勾上等比時只填一個數，另一邊讓它按比例算，避免把圓壓成橢圓。
- 圖示一律用 PNG，因為要透明底；照片類素材用 JPG；網頁裡想省體積選 WebP，品質滑桿 10%–100% 那一檔只對 JPG 和 WebP 有意義。
- 下載到本機，用系統看圖放大到 400% 看邊緣，再實際放進使用位置截一張（例如瀏覽器分頁、聊天視窗的分享卡），確認在真實尺寸下還認得出這是那枚圖示。
四、反覆出現的幾個坑
- 尺寸填小了：viewBox 是 24，輸出框裡也順手填 24，拿到的就是一張 24px 的圖，再放大到 1024 就是一團馬賽克。輸出尺寸要按使用位置真正需要的像素填，不是按原始檔的邏輯尺寸填。
- 想要 JPG 的透明底：JPG 本身沒有 alpha 通道，透明區域會被填成白色，這不是轉換時勾一下選項能解決的。
- 顏色對不上設計稿：SVG 裡的漸層和濾鏡依賴瀏覽器算圖，某些色值轉出來和設計軟體裡不完全一致。我的原則是以轉出的點陣圖為準回頭改 SVG，而不是反覆重轉。
- 只給了點陣圖卻想要向量：那是反方向的活，得走描摹，出來的路徑是近似結果，別期待跟原稿一模一樣。
- 一次交很多個規格：我的習慣是一份一份轉，每轉完一個就核對一次尺寸和透明，因為不同規格的參數本來就不一樣。
五、匯出尺寸我是怎麼定的
我的取數原則只有一句：按那個位置真實顯示多大來算，再乘以 2，最後往上取到常見檔位。乘以 2 是為了高解析螢幕，往上取檔是因為平台後台往往只接受固定幾檔。這次交付我實際填的數字如下：
| 使用位置 | 頁面上顯示約多大 | 我匯出的尺寸 | 格式與透明 |
|---|---|---|---|
| 瀏覽器分頁 | 16×16 | 32×32，另存一份 64×64 備用 | PNG，保留透明 |
| 桌面捷徑 | 48–72dp | 192×192 | PNG，保留透明 |
| 應用程式後台圖示欄位 | 約 150–170 | 1024×1024 | PNG，四周留白 10% |
| 聊天視窗分享卡片 | 約 600×315 | 1200×630 | WebP，品質 90% |
| 文件裡的品牌字標 | 24–32 高 | 64×64 | PNG，保留透明 |
對照表裡最容易被忽略的是「留白」這一欄。圖形本身塞滿畫布時，進了系統自動加的圓角遮罩裡就會被切掉邊緣，我那枚圖示的弧線第一次就是貼邊貼太緊，在 192 那一檔被削掉了兩個端點。
六、常見疑問
Q：SVG 轉 PNG 會失真嗎？
輸出尺寸夠大就不會。失真幾乎都來自尺寸定得比使用位置還小，或者來源圖形裡存在 1px 級細節，落到小網格上被抹平。
Q：想要透明背景該選哪個格式？
PNG。JPG 不支援透明，會填成白底；WebP 支援透明，同畫質下體積更小，但要確認接收方那個後台認不認 WebP。
Q：品質滑桿對 PNG 有用嗎？
我實測影響的是 JPG 和 WebP。PNG 是有損還是無損由格式本身決定，所以我出 PNG 的時候只調尺寸，不動品質。
Q：為什麼轉出來的圖有白邊？
多半是抗鋸齒：路徑邊緣的半透明像素在深色背景上會顯出一圈淺邊。我的做法是匯出透明 PNG 之後在使用位置看效果，明顯的話把圖形外輪廓稍微往內收一點。
Q：SVG 會被上傳嗎？
不會，轉換在瀏覽器本機完成。幫未公開專案做圖示時，這一條是我能不能用它的判斷標準。
那天之後我改了交付習慣：圖示原始檔除了 SVG，一定同時附一份「尺寸—格式—是否透明」的對照表，把每個使用位置寫清楚。轉換本身只是一次填數字的動作，前面那份表才是真正省時間的東西。