ByteScope

SVG to PNG

把 SVG 畫成點陣再存 PNG——你沒辦法再把它縮放回路徑。

檔案不會離開你的瀏覽器 — 全部在本機處理。

轉檔為
調整尺寸
PNG 為無損格式,無品質設定

✓ 輸出檔案已完全移除 EXIF、GPS 等所有元資料。

拖放圖片至此處

或點擊瀏覽 — PNG, JPEG, WebP, GIF, HEIC, AVIF, SVG — 亦可在頁面任意處貼上圖片(Ctrl+V)

為什麼要把 SVG 轉成 PNG?

SVG 轉成 PNG 會失去什麼

這是點陣化,不是重新包裝。Chrome 沒辦法對 SVG blob 做 createImageBitmap,所以 ImageConvertTool.rasterizeSvg 用 new Image() 載入,依 naturalWidth、naturalHeight 畫到 canvas,再把那張點陣丟進 worker。從那一刻起輸出就是像素。路徑、群組、viewBox、currentColor,以及還需要 SVG 樹的 CSS 都沒了。之後再放大是在插值那些像素,不是重跑向量繪製。就算 PNG 對手上的點陣是無損的,這一步也不可逆。

尺寸在編碼前就定了。若 naturalWidth 或 naturalHeight 是 0——沒有內建尺寸的 SVG——rasterizeSvg 會改畫 1024 × 1024,介面上出現 svgNoSizeWarning。apps/web/public/og.svg 宣告寬 1200、高 630,所以實測用 1200 × 630 而不是後備值。SVG 裡的文字會變成像素,用的是繪製端實際拿到的字型。這段程式不會去抓字型檔,也不會抓外部的 image href:它只畫瀏覽器影像解碼器從 SVG 位元組生出來的結果。@font-face 網址或 SVG 裡的外部 PNG 看不看得到,是瀏覽器把 SVG 當圖片載入時的規則,不是轉換器另外實作的步驟。

動畫是故意跳過的。因為送進 worker 的已經是點陣,convert.worker.ts 不會替 SVG 開 ImageDecoder 動畫探測。SMIL 或 CSS 動畫不會變成 APNG。編碼的是 canvas 上那一張。

實測時檔案大小怎麼變

2026-09-13,腳本讀 apps/web/public/og.svg(1,809 位元組),用 sharp/librsvg 點陣成 1200 × 630,再把「最佳化 (oxipng)」打開:63,223 位元組,大約是向量檔的 35 倍。那個勾選框這一頁預設是關的,維持關閉的話,瀏覽器自己編出來的 PNG 通常還會再大一點。合理,因為 SVG 是文字,PNG 存的是一張 1200 × 630、深色卡片加字的點陣。Node 的點陣器和瀏覽器的 new Image() 加 canvas 不是同一套,字型一替代,位元組就可能不一樣。長寬對得上這份檔案的 width/height,也就是 rasterizeSvg 會用的尺寸。小小的 logo SVG 不會生出這麼大的 PNG;這個樣本是網站 1200 × 630 的 Open Graph 圖。

什麼時候不該把 SVG 轉成 PNG

還要在各種尺寸使用的 logo 或圖示不要轉:PNG 只有一個解析度,母檔本來是 SVG。還要當路徑或文字繼續編的圖也不要轉。意義依賴外部字型或外部圖的 SVG,先內嵌並自己看過快照再轉,因為這工具不會去抓那些額外檔。CMS、信件、<img> 宿主拒收 SVG,或你需要給點陣編輯器用的單一點陣時,再選 PNG,並把 SVG 留在旁邊。

轉換完全在你的瀏覽器內進行 — 不上傳、不排隊、無浮水印。想放幾個檔案都行,可逐一下載,也能打包成 zip。

常見問題

之後放大 PNG,還能跟 SVG 一樣銳利嗎?

不能。PNG 的邊緣是點陣化當下那個尺寸的像素。放大是插值。還需要任意縮放就留著 SVG;宿主不收向量檔時才用 PNG。

SVG 沒寫寬高時,會畫成多大?

naturalWidth 或 naturalHeight 是 0 時,rasterizeSvg 畫 1024 × 1024,並顯示沒有內建尺寸的警告。像 public/og.svg 這種有宣告寬高的檔,會用它的 1200 × 630。

SVG 裡的 SMIL 或 CSS 動畫會變成動畫 PNG 嗎?

不會。主執行緒先截一張點陣,worker 只要看到 msg.bitmap 就跳過動畫探測。編碼的只有那張靜態圖。

我的圖片會被上傳到任何地方嗎?

不會。轉換在你的瀏覽器內使用 canvas API 和 Web Worker 完成 — 檔案不會離開你的裝置。沒有上傳步驟、不用排隊,檔案大小也只受限於你電腦的記憶體。

轉換後的圖片會保留 EXIF 中繼資料嗎?

不會 — 而這正是特色之一。透過 canvas 重新編碼會移除所有中繼資料:GPS 位置、相機型號、時間戳記和色彩描述檔。輸出只包含像素,而這通常正是你公開分享圖片前想要的結果。

可以一次轉換很多張圖片嗎?

可以。拖放或貼上任意數量的檔案;每個檔案都會在背景轉換,各自有進度顯示和下載按鈕,也可以把全部內容打包成 .zip 一次下載。

轉檔會讓畫質變差嗎?

看你選的目標格式。不管來源和目標是哪兩種格式,轉換器一律先解碼成原始像素再重新編碼,中繼資料也是這樣被移除的。目標是無損格式(PNG,以及在 256 色限制內的 GIF)時,像素和解碼出來的完全一樣;目標是 JPEG、WebP 或 AVIF 時,則由品質滑桿控制取捨,而且來源本來就是有損檔的話,會再多疊一層損失。