how to export svg to jpg
將 SVG 匯出為 JPG:三大步驟與各步驟的作用

將 SVG 匯出為 JPG 究竟做了什麼

將 SVG 匯出為 JPG,會把一個自含的向量圖稿,以其宣告的像素尺寸光柵化到一塊不透明的畫布上,並由你選擇介於 0.60 與 1.00 之間的 JPEG 品質。SVG 轉 JPG 轉換器完全在目前的瀏覽器中完成這項工作:它接受一個最大 5 MiB 的自含 .svg 檔,將透明度壓平至單一背景色,以圖稿宣告的像素尺寸繪製,再交由瀏覽器的 canvas 實作,依照你設定的品質產生可供下載的 .jpg。因為檔案讀取、安全稽核、解碼、繪製與匯出的每一步都在本機執行,所以 SVG 標記和產生的影像都不會上傳到伺服器。輸出是固定大小的像素網格,不會保留原始路徑、可編輯物件、圖層、動畫或中繼資料,也無法在來源 SVG 原為透明處保持透明,因為 JPEG 沒有 alpha 通道。最終成果是一張完成的點陣影像,可用於電子郵件、簡報,以及不接受向量檔的平台,但當你需要可縮放、可編輯或透明的圖稿時,它並不能取代原始 SVG。

這種壓平正是人們最初選擇匯出的實際原因。許多平台——電子郵件用戶端、社群上傳工具、簡報軟體,以及大多數印表機——要嘛直接拒絕 SVG,要嘛在不同瀏覽器之間呈現不一致的結果。一張與來源宣告像素尺寸相符的自含、不透明 JPG,能可靠地送進這些目的地,並在每台開啟它的電腦上保持一致。

在按下轉換之前先把 SVG 準備好

瀏覽器式的 SVG 轉換器比桌面設計工具更為謹慎,因為 SVG 可能帶有指令碼、外部參照與動畫,在與網頁同一程序中解碼並不安全。轉換器僅接受 SVG 的一個有完整文件記載的子集:形狀、路徑、文字、漸層、遮罩、裁切,以及完全定義在檔案內部、以片段 ID 指定的濾鏡。在繪製任何內容之前,它會拒絕 script、foreignObject、iframe、object、embed、image、audio、video 與 style 元素。它也會拒絕事件處理屬性、行內 style 屬性、xml:base、文件類型與實體宣告、非 XML 處理指令,以及任何未指向同一檔案內部本機片段的連結或資源屬性。CSS url() 參照只有在指向本機片段(例如 url(#gradient))時才會被接受。

實際效果是,從設計程式匯出的 SVG 若帶有大型樣式表、嵌入的點陣影像或網頁字型,通常會被拒絕,即使這些特徵在原始情境中無害。編輯應用程式通常可以修正這點:將外觀展開為呈現屬性與路徑、移除嵌入影像、移除指令碼與事件處理器,並將漸層、遮罩、裁切與濾鏡以片段 ID 封裝在同個 SVG 內。如果你已有一個可運作的檔案,最快的測試方式是在目前的瀏覽器中直接開啟它;若能在該處正確呈現,轉換器就有合理的機會接受它。

接著會進行第二個基於 DOM 的檢查,確認該檔案是格式正確的 XML,且其根元素為 SVG 命名空間中的 svg。兩項檢查都必須通過,才會進行任何解碼。稽核失敗的檔案會立即停止並說明原因;不會進行解碼,也不會顯示部分輸出。

用三個瀏覽器步驟將 SVG 匯出為 JPG

  1. 開啟 SVG 轉 JPG 轉換器,從電腦中選擇一個自含的 .svg 檔。檔案大小不得超過 5 MiB。選取後,轉換器會讀取檔案、執行安全與尺寸檢查,並回報偵測到的圖稿像素尺寸。
  2. 挑選要用來取代 SVG 中任何透明區域的不透明背景色(預設為白色),並選擇介於 0.60 與 1.00 之間的 JPEG 品質。更改任一設定都會清除先前產生的 JPG,避免舊的結果被誤認為是新的結果。
  3. 按一下「轉換」以將 SVG 光柵化,比對 JPG 預覽與來源 SVG,再下載產生的 .jpg。預覽與下載皆來自同一個 canvas 匯出,因此你看到的就是你存下的內容。

如果轉換回報的是解碼錯誤而非 JPG,表示 SVG 含有瀏覽器無法渲染的內容——可能是目前瀏覽器不支援的特徵、格式錯誤的元素,或是稽核不允許的屬性。在此情況下,先前成功產生的 JPG 也會一併清除,因此你能儲存的唯一輸出,就是確實完成轉換的結果。由於隱藏的檔案輸入會在每次選擇後重設,因此同一檔案可以再次選取;只要檔案、品質或背景色一有變動,過時的預覽就會立刻失效。

輸出尺寸如何決定

JPG 的像素網格繼承自 SVG,而非你的螢幕。轉換器依序優先讀取根元素的 width 與 height 屬性:以無單位 CSS 像素表示,或帶有明確 px 單位後綴的正值,會直接採用。若任一可用尺寸缺失,轉換器會改為採用 viewBox 中的正值 width 與 height。帶小數的值會四捨五入為整數 canvas 像素。MDN 關於將 SVG 作為影像使用的指南指出,沒有內在比例的 SVG,其渲染尺寸來自根元素尺寸,當根元素尺寸缺失時則由 viewBox 提供備援。

對於百分比、實體單位、缺失尺寸或無效值,此工具不會猜測尺寸,而是直接停止並說明原因。兩項硬性上限會限制輸出:單邊最多 8,192 像素,總像素數最多 32,000,000。可能超出這些上限的檔案會收到錯誤訊息,絕不會被悄悄縮放、部分讀取或截斷。相同的上限也適用於輸入 SVG:超過 5 MiB 的內容會在稽核執行前就遭到拒絕。

限制數值超出時的結果
輸入檔案大小最大 5 MiB在稽核前即發生錯誤,不嘗試解碼
輸出寬度或高度每邊最大 8,192 像素錯誤,不產生部分輸出
輸出總像素數最多 32,000,000 像素錯誤,不產生部分輸出
輸入格式僅限自含 .svg由稽核或檔名/MIME 檢查拒絕
輸出格式僅限 .jpg,永遠不透明JPEG 沒有 alpha 通道

JPEG 品質與 0.60 至 1.00 之間的差異

品質設定控制的是 JPEG 壓縮,而非畫布大小。較高的數值通常保留更多原始細節,並產生較大的檔案;較低的數值則會捨棄更多高頻資訊,這對照片尚可接受,但會明顯損害銳利的向量邊緣、細線、小字、漸層以及高對比邊界。轉換器所開放的 0.60 至 1.00 範圍,與瀏覽器 canvas 實作中 canvas.toBlob 所使用的範圍相同;WHATWG HTML 規格將此範圍描述為 canvas 輸出 image/jpeg 時所接受的壓縮區間。

在 0.60 端,JPG 是此工具所能產生最小的檔案,且最容易在小字與銳利邊緣周圍出現瑕疵;在 1.00 端,檔案最大且損失最不明顯,因此這是邊緣至關重要的標誌與圖表等內容較安全的選擇。0.75 與 0.90 介於兩者之間,通常是網頁與電子郵件一般用途的實用預設值。如果你需要更小但仍看起來清晰的 JPG,正確做法通常是先以較高品質匯出,再交由專門的影像壓縮工具處理,因為本轉換器並不會把低品質檔案再重新編碼成更小的檔案。如需相關流程指引,如何在不失真的情況下將 SVG 轉換為 JPG一文詳細說明了該流程。

為何瀏覽器工具會拒絕某些一般的 SVG

保守的樣式限制,是「一般」SVG 被拒絕最常見的原因。許多設計工具會寫入 <style> 區塊或行內 style 屬性來控制填色、漸層與描邊。稽核會在解碼前就拒絕這兩者,因為同一個表面除了承載無害的填色規則,也可能帶有跳出該檔案範圍的 CSS 逸出、註解或 url() 參照。其他被稽核依類別封鎖的特徵如下所列。

特徵決定原因
Script 元素與事件處理屬性拒絕靜態影像從不需要主動執行的程式碼
foreignObject、iframe、object、embed拒絕會嵌入外部文件
image、audio、video 元素拒絕此工具不會擷取遠端或嵌入的點陣媒體
style 元素與行內 style 屬性拒絕同一表面可能帶有 CSS 混淆內容或外部 url()
xml:base、doctype、實體宣告、非 XML PI拒絕典型的 XML 攻擊面
href / src 指向本機片段以外的任何目標拒絕不會擷取遠端影像、字型或連結的 SVG
CSS url(#fragment)接受檔案內部的本機漸層、遮罩、裁切與濾鏡

通過文字稽核,並不保證被接受的 SVG 中每個特徵都能在不同瀏覽器之間呈現得一模一樣。字型可用性、濾鏡實作、色彩管理、遮罩、裁切與 SVG 版本支援都可能有所不同;若目前的瀏覽器不支援某個特徵,便會產生解碼錯誤並清除先前的結果。轉換器會停止並回報這類錯誤,而不是交給你一張與來源不再相符的 JPG。如果你需要一個已知良好的 SVG 來對照,請先在同一部瀏覽器中直接開啟來源檔案,確認它能正確呈現後再進行匯出。

When a Browser Export Is Not the Right Tool

The browser converter is built for ordinary web graphics: simple diagrams, logos made from local paths, self-contained icons, and other trusted artwork that fits the documented subset. It is not a sanitizer for hostile SVGs and it is not a certification that an SVG is safe to publish elsewhere. The audit rejects what is unsafe and explains the unsupported surface, but it does not claim to clean unsafe content and continue.

For archival, print, color-critical, or untrusted-content workflows, use a maintained desktop tool or an isolated server pipeline with a documented SVG security policy, and inspect the output before distribution. The JPG the browser produces also cannot preserve vectors, embedded fonts, animation, interactivity, accessibility structure, links, layers, or source editing history; if any of those properties matter to the destination, a raster export is the wrong intermediate format and a different converter — such as the SVG to PNG path, where transparency can survive — should be chosen instead. For a worked example of the same workflow on a specific platform, see the guide on how to convert SVG to JPG in Windows without software, which uses the same browser-based pipeline and walks through opening the converter, picking the file, and verifying the result without installing anything.