什麼是 SVG 轉 PNG 轉換器?
SVG 轉 PNG 轉換器會把向量圖繪製成像素點陣,再存成 PNG 檔。SVG 是 W3C 制定的可縮放向量圖形格式,以路徑、圓形、漸層和文字等幾何資料描述圖形。所以標誌不管放多大都清晰,但在繪製之前,檔案裡其實沒有任何像素。社群平台的頭像上傳、辦公文件、電子郵件簽名檔、應用程式商店頁面和不少內容管理系統,都只收像素圖,因此得先把 SVG 繪製成圖片。
這裡的繪製由瀏覽器內建的 SVG 引擎完成,與網頁顯示 SVG 用的是同一套。尺寸取自檔案本身:SVG 有指定寬度和高度,就照該數值,mm、pt、in 等單位會換算成像素;只有 viewBox 時,就用 viewBox 的尺寸;兩者都沒有,則以 1024 x 1024 繪製。如果 SVG 最長邊不到 512 像素(例如常見的 24 x 24 圖示),會依比例放大到最長邊 512 像素,因為向量圖放大不會損失畫質。接著 SVG 縮放選項再把尺寸乘上 1、2 或 4,每個檔案下方的說明會告訴你用了哪個尺寸、為什麼。更改縮放倍率後,所有已加入的 SVG 都會依新尺寸重新轉換。
舉個例子:你拖入 logo.svg,檔案宣告 width="240" height="80",並選擇 2x。標誌會先放大到 512 x 171,再乘以 2。點擊該列的縮圖會開啟預覽,標題顯示 1024x342,透明背景則以棋盤格呈現。SVG 沒有畫到的地方,在 PNG 裡都會保持透明,這通常也是大家選 PNG 而不選 JPG 的原因。
有些 SVG 內容用這種方式畫不出來。以圖片形式繪製的 SVG 不能讀取檔案以外的任何資源,所以用網址引用的圖片和網頁字型都會被略過,SVG 裡的腳本也不會執行。檔案內嵌的圖片則會正常繪製。動畫 SVG 只會輸出單一靜態畫面,含有 XML 錯誤的 SVG 則會被拒絕,並顯示提示訊息。
所有處理都在你的裝置上完成,不會上傳任何東西。超過 50 MB 的 SVG 檔會被拒絕,輸出超過 100 百萬像素,或寬度、高度超過 16384 像素也一樣,遇到這種情況,通常改用較小的縮放倍率就能解決。本工具免費、免註冊,每日有轉換次數上限。
如何把 SVG 轉成 PNG
加入 SVG 檔案
把檔案拖放到寫著「將 SVG 圖片拖放到此處,或點擊上傳」的區域。整組圖示可以一次放進去,每個檔案一加入就會馬上開始轉換。其他格式的檔案會被擋下,並附上對應轉換器的連結。
調整 SVG 縮放倍率
選擇 1x、2x 或 4x。1x 沿用 SVG 本身設定的尺寸,若尺寸偏小,會把最長邊放大到 512 像素。2x 和 4x 則把寬和高分別放大為兩倍或四倍,適合高解析度螢幕和列印。更改縮放倍率後,所有已加入的 SVG 都會重新轉換。
檢查每個結果
每一列都有 PNG 縮圖、狀態、對照 SVG 與 PNG 檔案大小的一行資訊,以及說明像素尺寸如何決定的備註。點擊縮圖就能查看 PNG 大圖和像素尺寸,還可以在「轉換前」與「轉換後」之間切換。
下載 PNG
按下該列的下載圖示即可儲存單一檔案,或按下清單標題中的「全部下載(n 張圖片)」,把整組檔案存成 converted-png.zip。檔名相同的檔案,在 ZIP 裡會自動加上編號。
為什麼要把 SVG 轉成 PNG?
SVG 比較適合留作原始檔,PNG 則通常更適合拿來交付,因為能接受它的地方多得多。
只收點陣圖的上傳欄位
個人頭像、市集商品頁、電子郵件簽名檔產生器和許多 CMS 媒體庫,都收 JPG 和 PNG,卻不收 SVG,部分原因是 SVG 可能夾帶腳本。PNG 能順利通過這些檢查,又保留了標誌需要的透明背景。
文件、簡報和聊天
辦公軟體、通訊應用程式和較舊的設計工具對 SVG 的支援參差不齊:有的直接拒絕,有的會漏掉漸層或字型,有的乾脆什麼都不顯示。PNG 則在哪裡看都一樣,因為你看到的已經是畫好的圖。
應用程式與圖示所需的固定尺寸素材
應用程式商店、啟動器和網站圖示(favicon)組都要求精確的像素尺寸。可以先在這裡用較大的倍率繪製 SVG,再用圖片尺寸調整工具調整大小,或用 PNG 轉 ICO 轉換器把 PNG 做成網站圖示。
SVG 與 PNG:該選哪一種
| SVG | PNG | |
|---|---|---|
| 圖片類型 | 向量圖,以幾何方式描述形狀。 | 點陣圖,由固定數量的像素組成。 |
| 縮放 | 不論放大到多大都清晰。 | 放大超過原始尺寸會變模糊或出現鋸齒。 |
| 透明度 | 沒有繪製的部分都是透明的。 | 完整的 Alpha 色版,本轉換器會完整保留。 |
| 動畫 | 可用 CSS 或 SMIL 製作。 | 靜態圖片。動畫 SVG 在這裡只會轉成單一畫面。 |
| 一般檔案大小 | 簡單的圖示和標誌檔案很小,複雜的插畫則會很大。 | 隨像素尺寸增加而變大,所以 4x 輸出比 1x 大上許多。 |
| 文字 | 需要電腦有對應的字型,或先把文字轉成外框。 | 文字已經轉成像素,所以在哪裡看都一樣。 |
| 軟體支援 | 所有現代瀏覽器都支援,但在辦公軟體、聊天和上傳工具中則不一定。 | 幾乎到處都能用。 |
| 最適合的用途 | 網站、原始設計稿,以及需要經常調整大小的內容。 | 上傳、文件、應用程式素材和分享。 |
PNG 尺寸如何決定
SVG 沒有固定的像素尺寸,所以轉換器分三個步驟來決定,並把結果寫在每個檔案下方的備註裡。
- 從最外層的 svg 元素讀取尺寸:寬度和高度都有設定時直接採用;只設定其中一個時,搭配 viewBox 的比例計算;兩者都沒有時只看 viewBox;連 viewBox 也沒有則為 1024 x 1024。百分比和 em 數值一律忽略。
- 如果最長邊不到 512 像素,就依比例放大圖像,讓最長邊達到 512。
- 把兩邊都乘上你選的縮放倍率:1、2 或 4。
| SVG 宣告 | 1x | 2x | 4x |
|---|---|---|---|
| width="24" height="24" | 512x512 | 1024x1024 | 2048x2048 |
| 只有 viewBox="0 0 800 600" | 800x600 | 1600x1200 | 3200x2400 |
| width="210mm" height="297mm" | 794x1123 | 1588x2246 | 3176x4492 |
| 未設定 width、height 或 viewBox | 1024x1024 | 2048x2048 | 4096x4096 |
輸出上限為 1 億像素（100 MP），且單邊不得超過 16384 像素。5000 x 5000 的 SVG 用 1x 和 2x 都沒問題，但用 4x 時寬度會達到 20000 像素，因此會被拒絕並顯示提示訊息。改選較低的倍率即可轉換。
隱私與安全
- SVG 的繪製和 PNG 的儲存，都在這個瀏覽器分頁內以用戶端方式完成，檔案不會上傳。
- SVG 是以圖像方式渲染的，所以裡面的指令碼不會執行，指向外部檔案的連結也不會被讀取。在這裡開啟來源不明的 SVG，它也無法連上網路。
- 這裡不需要 WebAssembly 解碼器，因為瀏覽器本身就內建 SVG 渲染引擎。
- 每日額度檢查會傳送工具名稱、裝置識別碼，若您已登入，還會傳送帳戶權杖。批次處理完成後，只會記錄檔案數量、總位元組數和輸出格式，不會記錄檔案名稱或內容。
- 轉換後的 PNG 會留在分頁的記憶體中，直到您移除它們、按下「全部清除」或關閉頁面為止。伺服器上不會留下任何副本。
主要功能
支援 1x、2x 和 4x 輸出
可依 SVG 原始尺寸，或以兩倍、四倍解析度輸出，在高像素密度螢幕和列印時都能得到清晰的成果。
小圖示也能直接使用
宣告尺寸約為 24 x 24 的 SVG，會先把最長邊放大到 512 像素，再套用倍率，不會變成郵票大小的小圖。
保留透明背景
SVG 沒有繪製的區域會維持透明，列表中的縮圖和後方的預覽都以棋盤格顯示，讓您一眼看出透明的範圍。
讀取實際單位
以 px、pt、pc、in、cm 和 mm 表示的寬度都會換算成像素，缺少寬度或高度時，則以 viewBox 為準。
常見問題
Comments
0 comments
No comments yet. Be the first to share your thoughts!