0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
設定
將 SVG 轉換為 PNG 或 JPG,並選擇輸出解析度:向量會依所要求的尺寸重新繪製,因此任何比例下都保持清晰。你可以上傳檔案或貼上 SVG 程式碼。全部處理都在瀏覽器中完成,不上傳任何檔案。
來源

拖入 SVG 檔案,或點擊選擇

SVG

運作方式

SVG 是向量格式:以座標描述圖形,因此可在任何尺寸下繪製而不損失清晰度。PNG 和 JPG 則是像素數量固定的點陣圖。點陣化正是這個步驟:確定一個解析度,把向量繪製到該像素格線上。

因此解析度要在轉換之前選擇,而不是之後。工具會先把 SVG 的寬高改寫為所需尺寸,然後才繪製,這樣瀏覽器會依該比例重新描繪曲線,而不是把一張小圖放大。你可以給出倍數(2×、4×……),也可以指定精確的像素寬高。

PNG 會保留透明度,JPG 不支援,因此透明區域會填上你選擇的背景顏色。全部繪製都在瀏覽器中透過 Canvas 完成:檔案和 SVG 程式碼都不會上傳到任何伺服器。

範例

<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 px24 px 的圖示以 4× 倍數轉換後為 96 × 96 px,這是高像素密度螢幕的常用尺寸。
<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 px沒有 width 和 height 屬性的 SVG 會從 viewBox 取得尺寸;這裡以 1× 點陣化,用作社群網站的預覽圖。

使用情境

  • 產生應用程式商店或 Web 應用程式資訊清單所要求的 PNG 圖示,它們不接受 SVG。
  • 把向量標誌轉換為透明背景的 PNG,插入簡報或文件。
  • 把 SVG 圖表或示意圖匯出為 JPG,用於郵件附件或上傳到不接受向量圖的平台。
  • 為高像素密度螢幕產生同一圖示的 @2x 與 @3x 版本。
  • 依 SVG 範本產生網站的預覽圖(Open Graph)。

常見問題

應該選擇什麼解析度?

取決於最終用途。一般螢幕使用圖片實際顯示的尺寸即可;高像素密度螢幕建議取該值的 2× 或 3×。用於印刷時,把英吋尺寸乘以 300 即可達到 300 dpi。

為什麼我的 SVG 輸出尺寸和預期不一樣?

初始尺寸取自 width 和 height 屬性;若缺少或使用百分比,則採用 viewBox 的比例。兩者都沒有時,瀏覽器會假定為 300 × 150 px。你可以忽略該值,在自訂模式下輸入精確的寬高。

透明度會保留嗎?

PNG 可以,只要保持勾選透明背景選項。JPG 沒有 Alpha 通道,因此一律繪製在純色之上:預設是白色,你也可以更改。

為什麼使用了外部圖片或字型的 SVG 會失敗?

當 SVG 在圖片元素中繪製時,它無法下載其他網域的資源,瀏覽器基於安全考量會阻擋匯出。解法是把這些資源內嵌到 SVG 中:圖片改為 data URI,文字轉換為路徑。

可以把 PNG 轉回 SVG 嗎?

不能直接轉回:點陣化會遺失向量資訊,只剩下像素。要恢復曲線需要經過向量描圖,得到的是近似形狀而非原始檔案。因此最好始終保留原始 SVG。