在瀏覽器中將 SVG 轉換為 JPG，總是會把以數學路徑表示的向量檔案，轉成固定大小的點陣圖，而固定大小點陣圖在本質上就無法保留讓 SVG 一開始這麼有用的無限可縮放性。你能保留的，是在選定解析度下的影像保真度：銳利的邊緣、準確的色彩、SVG 中宣告的精確像素尺寸，以及大多數由瀏覽器算繪的漸層、填色和描邊。你無法保留的，則是向量原始檔本身、嵌入的字型、中繼資料、動畫、無障礙結構、圖層，或任何可能存在於原始標記中的互動元素。因此，對於「不失真」務實的說法，是在選定解析度下保持邊緣銳利、文字清晰、色彩忠實——而不是讓 SVG 保持不變。SVG 轉 JPG 轉換器會在目前的瀏覽器中於本機執行這個轉換，將透明區域填滿為單色，套用介於 0.60 到 1.00 之間的品質值，並將結果寫成一個獨立的 .jpg 檔案下載。SVG 內容與最終的 JPG 都不會被上傳。

how to convert svg to jpg without losing quality
如何在不失真的情況下將 SVG 轉換為 JPG

在 SVG 轉 JPG 的過程中，「品質」實際上代表什麼

SVG 檔案以數學方式描述形狀、路徑和色彩。JPG 描述的是固定大小的像素網格。這個差異，正是這項轉換會有所謂品質討論的根本原因。

當人們詢問如何在不失真的情況下將 SVG 轉換為 JPG 時，他們通常指的是以下三件事之一：

  • 不要把我的銳利邊緣模糊掉或產生光暈。向量檔中的邊緣無限銳利；JPG 中的邊緣則是經過反鋸齒處理的像素。在合理的品質與足夠大的輸出畫布下，這個差異看不出來；但在低品質下，你可以看到曲線和小字體旁邊出現振鈴效應與模糊。
  • 不要改變我的色彩。由瀏覽器解碼的 SVG，在使用標準色彩且未引用外部資源的情況下，應能呈現與任何現代瀏覽器相同的顏色。
  • 不要縮放或拉伸我的作品。輸出畫布的大小是依據 SVG 自身宣告的寬度和高度，或其 viewBox 來決定。轉換過程不會默默重新縮放。

無論你選擇什麼品質，JPG 都無法保留可縮放性、原始可編輯性、嵌入字型、動畫、圖層、連結、無障礙屬性以及中繼資料。讓 SVG 可編輯的那些文字與路徑，在畫布匯出成 JPG 的那一刻，就會被壓平為像素。

因此，對於這個工作流程來說，「不失真」的務實定義是：在相同的像素尺寸下檢視時，JPG 應該與 SVG 看起來視覺上完全一致，沒有壓縮失真、色彩偏移或意外縮放的情況。MDN 指南中關於 SVG as an image 的說明，是瀏覽器在解碼過程中所採用算繪行為的有用參考。

為什麼在本機瀏覽器中轉換能保留更多原始內容

許多線上轉換器會把你的檔案傳送到伺服器，在那裡編碼後再送回來。每一次上傳往返，都可能帶來額外壓縮、浮水印插入，或對原始檔案進行非預期的重新編碼。

SVG 轉 JPG 轉換器會在目前的瀏覽器中執行整個流程。SVG 檔案在本機讀取，保守稽核（腳本、foreignObject、事件處理器、外部資源等）也在本機執行，瀏覽器將 SVG 解碼為影像，然後在以宣告尺寸繪製 SVG 之前，先以選定的背景色填滿畫布。接著，畫布透過 canvas.toBlob 匯出 JPG blob，這在 WHATWG HTML canvas 規範 中有定義，而該 blob 會提供下載。

沒有任何內容會上傳到伺服器。這件事除了隱私之外還有兩個重要意義：它消除了伺服器端的重新壓縮步驟，也代表你得到的結果就是瀏覽器實際繪製的內容。權衡之處在於，結果取決於瀏覽器的 SVG 算繪器，因此某個瀏覽器支援而另一個不支援的功能，會產生不同的 JPG。請在另一個分頁中將 JPG 預覽與原始向量檔進行比對，而不是單獨相信檔案大小。

三個步驟將 SVG 轉換為 JPG

  1. 選擇一個不超過 5 MiB 的自含式 .svg 檔案，並等待安全與尺寸檢查完成。
  2. 選擇一個不透明的背景色彩，以及介於 0.60 到 1.00 之間的 JPEG 品質值；變更任一設定都會清除先前的結果。
  3. 轉換 SVG，將 JPG 預覽與原始檔並列比對，然後下載新的點陣檔案。

每個步驟都有一些值得了解的小細節。

關於步驟 1，「自含式」代表不能有遠端圖片、外部樣式表、網頁字型或連結的 SVG 檔。如果你的 SVG 引用了這些內容，稽核會在解碼前將其拒絕。偵測到的像素尺寸會在這項檢查後出現；如果 SVG 以像素宣告正向的寬度和高度，則會採用該值；否則使用正向的 viewBox 值。百分比尺寸、實體單位、缺失尺寸以及無效值都不會被猜測處理。超過 5 MiB 的檔案，或任一邊超過 8,192 像素，或總像素數超過 32,000,000 的檔案，會收到錯誤訊息，並且永遠不會被默默重新縮放、局部讀取或截斷。

關於步驟 2，品質值是傳遞給畫布編碼器的第二個參數。較高的數值能在銳利邊緣和小字體周圍保留更多細節；較低的數值則壓縮得更強，可能會產生振鈴效應。之所以提供背景色彩選擇器，是因為 JPG 沒有 alpha 通道；透明 SVG 區域會在繪製作品之前，先以選定的單色（預設為白色）填滿。變更任一設定都會撤銷先前的結果，因此較舊的預覽不會被誤認為新的轉換結果。

關於步驟 3，在另一個分頁中將 JPG 預覽與原始 SVG 比對，是最可靠的檢查方式。如果預覽看起來不對——例如顏色偏移、漸層消失、形狀被裁剪——原因幾乎總是某個被保守稽核拒絕的 SVG 功能，或是你的瀏覽器無法算繪的功能，而不是 JPG 編碼器本身的問題。

品質、背景與尺寸控制項

這三個控制項各自影響結果的不同面向。下表摘要說明每個控制項的作用，以及它無法影響的部分。

控制項 其影響範圍 其無法影響之處
品質（0.60 到 1.00） JPEG 壓縮等級，亦即在銳利邊緣與小字體周圍保留多少細節 輸出像素尺寸、向量可縮放性
背景色彩 在繪製 SVG 之前先塗上的單色，用以取代任何透明區域 輸出是否維持 JPG 格式；檔案永遠是不透明的
輸出尺寸 由 SVG 在像素層級上正向的根寬度與高度，或其 viewBox 決定 無法默默重新縮放、拉伸或猜測大小

品質控制的是壓縮程度，而不是尺寸。較高的數值通常能保留更多細節並產生較大的檔案；較低的數值則可能在銳利向量邊緣、小字體、漸層和高對比邊界周圍產生可見的失真。小數尺寸會四捨五入為完整的畫布像素，且在給定品質值下，最終的檔案大小取決於作品本身，因此 JPG 預覽才是真正的事實依據，而非目標位元組數。

為什麼一個原本沒問題的 SVG 會被拒絕

SVG 可能帶有腳本、嵌入的點陣圖、網頁字型、動畫、外部 HTML 內容，以及從網路載入的樣式表。此轉換器刻意僅支援一個保守的子集，因為目標是在不執行標記的情況下繪製其內容。

SVG 被拒絕的常見原因包括：

  • 樣式區塊或行內 style 屬性，即使看似無害。
  • 透過 image 元素嵌入的圖片，包括 data URL。
  • foreignObject、iframe、object、embed、audio、video 以及 script 元素。
  • 事件處理屬性，例如 onclick、onload 或 onmouseover。
  • xml:base、非 XML 處理指令、文件類型宣告與實體宣告。
  • CSS url() 參照，只要其指向的位置不是像 url(#gradient) 這樣的本機片段。
  • 指向檔案外部的外部 href 或 src 屬性。

如果你的設計工具匯出的 SVG 帶有樣式區塊或嵌入資源，務實的修正方式是：在匯出時選擇「將樣式轉換為屬性」、若不再需要可編輯文字則將文字轉為路徑、把所有圖片內嵌或移除。漸層、遮罩、裁剪與濾鏡應置於同一個 SVG 內部，並以片段 ID 進行參照。如果透明度比檔案大小更重要，SVG 轉 PNG 轉換器能產生保留原始 SVG 透明區域的 PNG——這是 JPG 無法做到的。

什麼情況下 SVG 轉 JPG 不是合適的工具

此轉換器是為一般網頁圖形、簡單圖表、由本機路徑構成的標誌、自含式圖示，以及屬於該保守子集的類似可信賴作品所設計。在以下幾種情況下，它並非合適的選擇：

  • 不受信任或具惡意的 SVG。此轉換器不是資安工具。它會拒絕一組定義明確的不安全介面並停止運作；它不會進行淨化後再繼續。對於來源不明的 SVG，請使用有維護的桌面轉換器，或具備明確 SVG 政策的隔離伺服器流程。
  • 歸檔與印刷流程。JPG 無法保留向量原始檔、嵌入字型、色彩設定檔或無障礙結構。若要進行歸檔，建議使用可寫入 PDF、保留 SVG、或將原始資產與點陣匯出並存儲存的工具。
  • 對色彩要求嚴格的工作。瀏覽器的 SVG 算繪並未執行像印刷預檢工具那樣的色彩管理。對於品牌關鍵或印刷關鍵的工作，請在具備明確色彩處理的流程中進行算繪。
  • 動畫與互動。輸出是靜態 JPG。動畫會消失。如果目的是呈現動態，請直接從原始檔匯出 GIF 或影片。

若想了解在相近視覺品質下會影響檔案大小的格式選擇，WebP 與 JPG 比較指南詳細說明了其中的權衡，當 JPG 並非最終目的地時，是一篇值得搭配閱讀的文章。

若想進一步了解，請參閱如何在不上傳的情況下批次將 SVG 轉換為 PNG。