# 怎麼把 SVG 轉成合適尺寸的 PNG

轉換是容易的那一半。真正決定結果有沒有用的，是那個沒人替你回答的問題：到底要多少畫素？這一頁講這個數字從哪裡來，以及一張圖紙在變成畫素的路上會丟掉什麼。

[開啟SVG 轉圖片](https://abox.tools/zh-TW/svg-to-image/): 說個尺寸。向量圖本來就沒有尺寸可丟。

最後更新 2026年8月26日

## 先說結論

開啟 [SVG 轉圖片](https://abox.tools/zh-TW/svg-to-image/)，把檔案丟進去，說個尺寸。要是沒人告訴你該多大，**最長邊 1024 畫素**是個不錯的預設值：幾乎什麼場合都夠用，又還發得動郵件。格式留 PNG，背景留透明，把檔案拿走。

下面講的是這個預設值不夠用的情況：人家已經給了你確切數字、這張圖要拿去印，或者轉出來看起來不對勁。

![預覽卡片：按要求的尺寸畫出來的圖形，下面是它的畫素尺寸。](https://abox.tools/screens/convert-an-svg-to-png/preview.webp)

工具在儲存之前先畫一遍，而且是按將要儲存的尺寸畫。匯出有什麼不對，最先在這裡露出來。

## 尺寸為什麼是你的事，不是檔案的事

JPEG 是一格一格量出來的畫素，問它多大，是有答案的。SVG 壓根不是一張圖，它是一串指令，在這裡畫個圓、把這條路徑塗成那個顏色，而指令沒有尺寸。瀏覽器可以按 16 畫素執行，也可以按 4000 畫素執行，兩邊一樣銳利，因為它根本沒在縮放，它是在重畫。

所以轉換這件事替你定不了這個數字，也所以你把數字定大一點不用付任何代價。在圖片這攤活裡，只有這一件事上「做大點」是白送的。

多數 SVG 檔案確實帶著 `width` 和 `height`，工具也會顯示出來，但那是個預設值，不是上限。一個寫著 `width="24"` 的圖示，只說明畫它的人當時想的是一條 24 畫素高的工具欄。

## 那個數字到底從哪裡來

**給網頁用。**拿這張圖在頁面上佔的 CSS 畫素尺寸，乘以你在意的那些螢幕的畫素密度。一個佔 200 畫素寬位置的 logo，Retina 筆記本上要 400 畫素的檔案，近幾年的手機上要 600。`@2x` 和 `@3x` 說的就是這麼點事，也正因如此，能替你把這三份一起寫出來的工具，省了你算三遍。

**給應用圖示、商店素材或者網站圖示用。**數字是公開寫好的，沒什麼可算：商店頁面上說多少就是多少。網站圖示乾脆別做光柵化，去[做一個 .ico](https://abox.tools/zh-TW/guides/make-a-favicon/)，一個檔案裡裝好幾個尺寸，因為瀏覽器分頁、書籤和 Windows 快捷方式要的根本不是同一個。

**給印刷用。**拿實際尺寸的英寸數乘以印表機的解析度。名片上寬兩英寸、300 DPI 的 logo，就是 600 畫素；同一個 logo 橫鋪整張 A4，也就是 8.3 英寸，大約 2500。印刷廠張口就要 300 DPI；而隔著半個房間看的大幅面橫幅，150 就綽綽有餘。

**給社交預覽圖或者 OG 圖用。**平臺給的是一個框，多數連結預覽是 ⁦1200 × 630⁩，而這個框跟你的 logo 比例不一樣。「墊起來」那個選項就是做這個的：圖形按自己的比例居中放，剩下的地方用背景色填上，而不是拉伸成一個所有人一眼就看出你沒檢查過的 logo。

兩種情況同時成立，就取大的那個。PNG 比需要的大一點，無非是下載稍微大一點；小了就補不回來了，為什麼，下一節說。

![尺寸卡片：一個列出多種說法的選單，設為寬度，填了 1024，旁邊是常用寬度。](https://abox.tools/screens/convert-an-svg-to-png/size.webp)

同一件事的五種說法。哪一種合適，取決於別人給你的是一個數字，還是一個要放進去的位置。

## 這條路沒有回頭

光柵化是單向的。圖紙一旦變成 PNG，它就跟別的圖片一樣是畫素了，之後再放大，只能編造當初根本沒量過的細節，出來還是放大照片那種發糊發塗的樣子。

所以，把 SVG 留著。它是母版，而且幾乎總是更小的那個檔案，將來任何尺寸都能從它身上完美地匯出來。PNG 只是為某一個具體用途做的一次匯出，需要另一個尺寸時，正確做法是再匯出一次，而不是把匯出來的那張拿去縮放。

有軟體聲稱能把 PNG 轉回 SVG。它乾的事叫描摹，也就是猜哪些曲線能解釋這一格格畫素。用在兩色平塗的圖形上還過得去，用在別的東西上就是又貴又沒用，而且它永遠拿不回原圖紙裡有過的東西。

## 變成畫素那一刻，有三件事會變

一張光柵化之後看起來不對勁的 SVG，幾乎總是栽在這三件事之一，而三件都值得在匯出之前知道，別等轉完。

**文字用的是這臺機器上有的字型。**帶文字的 SVG 裡並沒有字型，它只是點了個名，剩下交給渲染器自己去找。字型沒裝，就換一個頂上，而頂替的那個字形不同、字寬也不同，於是文字可能重排或者擠出邊界。那種從網址拉字型的檔案更慘：經由 `<img>` 光柵化的 SVG 壓根不許去取任何東西，所以什麼都到不了。

解決辦法每個設計師都知道：匯出 SVG 之前**把文字轉成輪廓**（Illustrator 叫建立輪廓，Figma 叫拼合，Inkscape 叫物件轉路徑）。字母變成幾何圖形，字型從此不再要緊，圖到哪裡都長一個樣。記得在副本上做，轉成輪廓之後，那些字就不能再當文字編輯了。

**髮絲般的細線會發灰或者乾脆消失。**在你選的尺寸下算出來不到一個畫素寬的描邊，沒法畫成一條實線，只能畫成一條淡的。所以一個精緻的 logo 按 64 畫素光柵化出來發白，同一個檔案按 512 卻完美。要是小尺寸是硬要求，答案是把圖畫簡單點、描邊加粗，而不是換個匯出設定，這也正是網站圖示該用符號而不是文字標的同一個道理。

**動畫停住。**一個帶動畫的 SVG 光柵化出來是一張靜止的圖，第一幀是什麼就是什麼。沒有哪個匯出設定能改變這一點。你要的是動起來，那就得做 GIF 或者影片，那是另一套做法。

## 透明，以及格式怎麼挑

沒有特別理由就用 **PNG**。它無損，保得住透明，而大片純色加硬邊，也就是圖紙主要由之構成的東西，在它裡面壓得很好。一個光柵化出來的 logo，存成 PNG 通常不但更乾淨，還比存成 JPEG *更小*。

**JPEG** 根本沒有透明。每一個透明畫素都得變成某種顏色，而要是沒人替你挑，它就變成黑的，那種「logo 蹲在一個黑方塊上」的結果就是這麼來的，很多人還以為是 bug。它的有損方式恰好也在這類圖上最難看：每條硬邊周圍一圈麻點。除非有什麼東西非它不可，否則別用。

**WebP** 把 PNG 能做的都做了，檔案還更小，現在的瀏覽器也都讀。不用它的理由在瀏覽器之外：老軟體、一些印刷廠，還有相當多的上傳表單，至今打不開它。

另外，選了 PNG 還想墊個背景色，也是非常正常的需求。只有當這張圖最終落在一個你預測不了的顏色上時，透明才有用；你已經知道那是一張白頁，那壓平到白色上，能省掉一整類意外。

## 匯出來是空白，或者不對勁

**除了空白什麼都沒有。**多半是根元素上少了 `xmlns`。缺了它，在圖片標籤看來這就不是 SVG，於是什麼都畫不出來。最快的判斷辦法是拿瀏覽器直接開啟這個檔案：瀏覽器也是一片空白，那問題在檔案，不在轉換器。

**圖縮在左上角一小塊。**檔案有 `width` 和 `height`，卻沒有 `viewBox`，於是沒有座標系可縮放，圖形在一張更大的畫布上保持著自己原來的單位。好一點的轉換器會替你補一個 viewBox；你手上這個沒補的話，手動在根元素上加一句 `viewBox="0 0 *寬* *高*"` 就好，SVG 是純文字，你改得動。

**畫面缺了一塊。**檔案裡有東西指向的是一個地址，而不是把圖形本身裝進來，比如一張以連結形式存著的照片、一份樣式表、一個字型。拒絕去取這些的光柵化器做得對，而且攔住它們的是同一條規則：你從別處下載來的 SVG，也別想回頭向做它的人彙報什麼。回繪圖軟體裡重新匯出一次，把圖片一併嵌進去。

**它拒絕一個特別大的尺寸。**瀏覽器給畫布定了上限，而且各家還不一致：每邊超過一萬六千畫素左右就什麼都拿不回來了，iPhone 和 iPad 上的 Safari 放棄得更早，大約在 ⁦4096 × 4096⁩。會提前警告你的工具，是在替你擋下一個空白檔案，因為瀏覽器撐不住時給的正是空白，而不是一句報錯。

## 這些事一樣都不用上傳

光柵化 SVG 這件事，瀏覽器一天要做幾千次，網頁上畫一個圖示用的就是同一套東西。你的圖稿要變成 PNG，技術上根本沒理由跑一趟伺服器再回來，而這裡的工具也確實哪裡都不發：頁面的 `Content-Security-Policy` 把它可能聯的地址全列了出來，沒有一個是本站的。

這一點在 SVG 上比在別的格式上更要緊，因為 SVG 是文件，不是圖片。它裡面可以裝指令碼，也可以裝遠端地址，而一個代理公司發給你的 logo，畢竟不是你自己寫的檔案。經由圖片標籤繪製時，它處在規範所說的*安全靜態模式*：指令碼跑不了，那個地址也永遠聯不上。管住這一條的是瀏覽器，不是這個網站。

與其聽我們說，不如把頁面開啟，拔掉網線，照轉一張試試。[把檔案傳給線上轉換器安全嗎？](https://abox.tools/zh-TW/guides/is-it-safe-to-upload-files/)裡還有另外三個檢查，用在任何工具上都管用。