在瀏覽器中將 SVG 轉換為 JPG,意味著將一個獨立的向量檔案渲染到帶有純色背景的畫布上,並以您設定的品質匯出為 JPEG,整個過程無需上傳原始圖稿或結果檔案。轉換會將透明度攤平(JPEG 沒有 alpha 通道),使用 SVG 宣告的像素尺寸或其 viewBox 來決定畫布大小,並在繪製任何內容之前,拒絕不安全的標記,例如腳本、嵌入的影像、foreignObject 以及遠端參照。輸出是點陣圖,因此路徑會變成像素,檔案也無法無限縮放,但它可以被列印、嵌入,或用於需要平面、不透明影像而非可編輯向量的工作流程。本指南所涵蓋的具體工具——SVG to JPG Converter——會在當前分頁中於本地端執行所有步驟,因此 SVG 文字、解碼後的像素以及最終的 JPEG 都不會離開您的裝置。如果您需要保留透明區域而非不透明的 JPG,SVG to PNG Converter 採用相同的本地管線,並產生支援 alpha 的結果。

大多數搜尋如何將 SVG 轉換為 JPG(或 PNG)的人,都是為了將向量檔案放入不接受 SVG 的地方——簡報投影片、舊版 CMS 的上傳欄位、僅接受平面點陣圖的訊息平台,或是預期接收 JPG 的印表機。有些人則是為了將標誌或圖表縮小,讓電子郵件附件在不同作業系統之間都能有一致的表現。少數人則希望無論渲染器的字型堆疊或濾鏡支援為何,最終資產都能呈現完全相同的外觀。對於這些任務,目標都是相同的:以可擴充性和可編輯性換取相容性,並獲得一個尺寸與色彩行為都可預測的單一平面點陣檔案。本指南的其餘部分將詳細說明 SVG to JPG Converter 如何達成這些目標,包括如何操作控制項、尺寸如何計算、透明度會如何處理、哪些 SVG 特性會被拒絕,以及何時該選擇不同的輸出格式。

convert svg to jpg or png
convert svg to jpg or png

SVG to JPG Converter 的功能

SVG to JPG Converter 會將一個獨立的向量檔案,在當前瀏覽器中轉換成不透明的 JPEG 影像。整個過程不涉及遠端伺服器——檔案會在本機端讀取、稽核、解碼到畫布上,然後匯出。您可以提供一個最大 5 MiB 的 .svg 檔案,工具會驗證其標記與宣告的尺寸,讓您選擇純色背景顏色,以及介於 0.60 到 1.00 之間的 JPEG 品質,最後產生單一 .jpg 檔案下載。由於 JPEG 沒有 alpha 通道,工具會一律先繪製平面背景,再將 SVG 合成到上方;預設為白色,顏色控制項可接受任何不透明顏色作為替代。

這件事之所以重要,是因為 SVG 是向量格式,而 JPG 是點陣格式,兩者無法互換。向量儲存的是路徑資料,可以在不失真的情況下縮放;而 JPG 儲存的是固定的像素網格。在實務上,這種轉換是單向的——您犧牲了可編輯的向量,換取廣泛的相容性,而且無法再取回路徑或圖層結構。中繼資料、嵌入的字型、動畫、互動功能、無障礙節點、連結以及來源編輯紀錄,都不會保留在 JPG 中。如果這些資訊對您很重要,請改用原始 SVG 搭配不同的管線。關於具體的控制項、大小與限制,SVG to JPG Converter 頁面有完整的規格說明。

三步驟將 SVG 轉換為 JPG

這是實際的操作步驟。只要您的 SVG 準備就緒,您可以在不到一分鐘內完成。

  1. 開啟 SVG to JPG Converter,選擇一個不超過 5 MiB 的獨立 .svg 檔案。等待安全性與尺寸檢查完成——工具會在您的瀏覽器中讀取該檔案,根據支援的子集稽核其標記,並在您繼續操作之前回報宣告的像素尺寸。
  2. 選擇背景顏色,以及介於 0.60 到 1.00 之間的 JPEG 品質值。更改任一控制項都會清除先前產生的 JPG,以免將過期的預覽誤認為目前的結果。當圖稿具有銳利的向量邊緣、細小文字、漸層或高對比邊界時,請使用較高的品質;當檔案大小比細節更優先時,則可使用較低的品質。
  3. 轉換 SVG,在螢幕上將 JPG 預覽與原始檔案進行比較,然後下載 .jpg 檔案。如果發生任何錯誤——例如檔案格式錯誤、不支援的特性或畫布匯出失敗——工具會回報錯誤並清除舊的結果,而不會留下一個誤導性的下載按鈕。

輸出尺寸如何決定

由於輸出是固定大小的點陣圖,像素尺寸來自 SVG 本身,而非推測。轉換器會優先尋找以無單位 CSS 像素或 px 表示的明確正根寬度與高度值。如果這些值缺失或無法使用,它會回退為 viewBox 的正寬度與正高度。小數值會四捨五入為整數畫布像素。依賴百分比尺寸、毫米等實體單位、缺少 viewBox 或無效值的 SVG 都會被拒絕——轉換器不會為它們編造尺寸,這保證了輸出結果的可預測性。當 SVG 作為獨立影像使用時,瀏覽器也遵循相同的規則,而 MDN 關於將 SVG 作為影像使用的指南 概述了相同的優先順序。

轉換器使用的來源適用時機
根元素的寬度 / 高度,以無單位 px 表示一律優先檢查
viewBox 的正寬度與正高度僅在根尺寸缺失或無效時使用
百分比或實體單位拒絕——不進行猜測
完全沒有可用的尺寸拒絕並附上說明

在配置畫布之前會套用嚴格的限制。任一邊最多 8,192 像素,總像素數最多 32,000,000。超過 5 MiB 輸入上限,或宣告尺寸超出這些限制的檔案,會收到錯誤訊息;它們絕不會被悄悄縮放、部分讀取或截斷。如果您需要更大或不同比例的輸出,請調整 SVG 本身(或在向量編輯器中縮放後重新匯出,並設定新的明確尺寸),而非依賴轉換器進行猜測。

透明度一律會變成純色背景

JPEG 沒有 alpha 通道,因此透明的 SVG 在輸出中無法保持透明。轉換器會在繪製任何向量內容之前,以選定的背景顏色填滿整個畫布,這意味著 SVG 中所有可見的元素都會位於該純色之上。預設為白色;顏色控制項可接受任何不透明顏色作為替代。形狀會依照其在原始文件中的順序,繪製於背景填色之上,因此 SVG 內部的圖層順序會被保留。

實際上的影響是:SVG 中原本透明的任何區域,都會與背景完全一致,日後無需擔心邊緣光暈或色彩溢出的問題。權衡之下,您無法使用此工具產生「看起來透明」的資產。如果您需要保留透明區域(例如將圖示放在變動的背景上),請改用 SVG to PNG Converter,它使用 PNG 的 alpha 通道並採用相同的本地管線。

轉換器會拒絕哪些內容,以及如何修正

相較於完整的瀏覽器渲染器,轉換器刻意只接受較小的 SVG 子集,因為 SVG 可能帶有主動或與網路連線的功能。在影像解碼之前,稽核會拒絕 script、foreignObject、iframe、object、embed、image、audio、video 以及 style 元素。它也會拒絕事件處理屬性、行內 style 屬性、xml:base、文件類型與實體宣告、非 XML 的處理指令,以及任何非本地片段參照的連結或資源屬性。CSS 的 url() 參照僅在指向本地片段(例如 url(#gradient))時才會被接受。接著,第二道基於 DOM 的檢查會驗證格式良好的 XML、位於正確命名空間的 SVG 根元素、禁用元素以及不安全的屬性。畫布匯出步驟本身由 WHATWG canvas toBlob 行為 所規範,用於產生最終的不透明 JPG;如果畫布未回傳 blob 或擲出例外,工具會回報失敗,而不會讓舊的成功下載殘留可見。

常見的拒絕原因如何修正
<style> 區塊或行內 style 屬性請製作工具將外觀展開為呈現屬性與路徑
透過 <image> 嵌入的點陣影像移除嵌入的影像,或在編輯器中將其攤平為路徑資料
外部 CSS、字型或連結的 SVG使用本地片段 ID,將資源封裝在同一個 SVG 內
<script>、事件處理常式或動畫標籤在匯出為點陣用途之前,移除腳本與動畫

保守的樣式限制意味著,部分由設計軟體匯出的普通 SVG,即使 style 區塊看起來無害,也會被拒絕——例如稽核不允許的匯出 CSS 簡寫。建議的修正方式是:請您的製作應用程式將外觀展開為呈現屬性與路徑、移除嵌入的影像、刪除腳本與事件處理常式,並使用片段 ID 將漸層、遮罩、剪輯與濾鏡封裝在同一個 SVG 內。經過這道處理後,檔案通常會變得小巧、獨立,並能在第一次嘗試時就被接受。

本地隱私與過期 URL 的生命週期

轉換的每一步都在當前瀏覽器分頁中執行。檔案讀取、標記稽核、SVG 解碼、畫布繪製、JPEG 匯出、預覽渲染以及下載本身,都是本地操作。SVG 文字、解碼後的像素、檔名以及產生的 JPG,都不會上傳至 Lizely,工具在轉換過程中也不會擷取遠端影像、網頁字型、樣式表、連結的 SVG 檔案或 data-URL 影像。您可以在測試轉換期間,透過瀏覽器開發者工具觀察網路流量,以確認僅限本機的行為。

內部生命週期規則可防止過期結果被誤認為新結果。來源檔與結果檔各自使用獨立的暫存物件 URL。選擇新檔案會撤銷兩個舊 URL;更改品質或背景僅會撤銷舊的 JPG;重新產生會替換結果 URL;離開頁面會釋放所有剩餘的 URL。請求與掛載狀態的守衛機制,可防止緩慢的解碼或畫布匯出覆蓋較新的設定。如果您需要再次轉換同一個檔案,可以重新選擇它——隱藏的檔案輸入會在每次選擇後重設。

何時該選擇 JPG、PNG 或其他格式

當目標位置需要平坦、不透明的點陣圖、當圖稿具有連續色調(例如漸層或柔和陰影)、以及當檔案大小比無損編輯更重要時,請選擇 JPG。當目標位置支援透明、當你需要像素級精準的邊緣以處理標誌和圖示、或當檔案之後還會再被編輯時,請選擇 PNG。何時該使用 JPG 或 PNG 指南涵蓋了完整的決策矩陣與實作範例,方便你並排比較各種格式。

取得 JPG 之後,在相同的工作流程中有幾個相關的本機工具也相當實用。圖片壓縮器可以在不上傳的情況下進一步縮小 JPG,而圖片調整大小工具則可以在目標位置需要特定尺寸時,調整結果的像素長寬。如果原始 SVG 帶有你想完整保留的字型、漸層、遮罩或濾鏡效果,請考慮使用維護良好的桌面轉檔工具,或是獨立的伺服器流程 —— 這款轉檔器依設計不會保留這些特性。

相關閱讀:如何在 Inkscape 與線上將 SVG 轉換為 PNG。