若要在 Mac 上把 SVG 轉成 JPG,請開啟瀏覽器版的 SVG to JPG Converter,載入一個不大於 5 MiB 的獨立 .svg 檔案,選擇一個不透明的背景色彩,將 JPEG 品質設定在 0.60 到 1.00 之間,然後下載瀏覽器在本機所產生的點陣化 JPG。整個流程都在當前的分頁中執行:SVG 會被讀取、稽核、解碼到畫布上,透過瀏覽器內建的編碼器匯出,再以 .jpg 下載檔的形式交還給使用者。不會上傳到任何遠端服務,不需要安裝附屬應用程式,也不需要更改任何 Mac 設定。這樣的組合對於想在不下載 Inkscape、不登入線上工具、也不在 Terminal 執行 shell 指令碼的情況下快速完成轉檔的 Mac 使用者來說非常重要。

macOS 本身在 Preview 與 Safari 中就已原生支援 SVG,這也是 Mac 使用者經常會遇到這個問題的原因之一。他們看到一個 .svg 附件,在 Preview 中打開,卻發現 Preview 無法把它存回成帶有自訂背景的平面 JPG。這正是瀏覽器轉檔工具能填補的落差:它使用 Mac 已經信任的同一個渲染引擎,套用使用者挑選的不透明背景,並將結果寫成一般的 JPEG,讓任何 Mac 應用程式、簡報、社群上傳或 PDF 都能讀取。

how to convert svg to jpg on mac
How to Convert SVG to JPG on Mac in Your Browser

為何瀏覽器工具適合 Mac 工作流程

大多數 Mac 使用者預設的瀏覽器不是 Safari 就是 Chrome,而兩者都能解碼 SVG、將它繪製到畫布上,並透過 WHATWG HTML 規範中所描述的標準 canvas.toBlob 介面匯出 JPG。因為這條管線在 macOS 中早已存在,專屬的網頁工具可以直接包裝它,而不必另外打包二進位檔。沒有東西需要安裝,不會出現隔離提示、Gatekeeper 警告,也不需要輔助使用、檔案與資料夾或完整磁碟存取權限。

瀏覽器轉檔也能保持原始 SVG 檔案不變。使用者挑選檔案後,瀏覽器會把檔案以文字形式保留在記憶體中,根據已記載的子集驗證標記,將它繪製到內部畫布上,並提供編碼後的 JPG 作為下載。來源 SVG、點陣預覽與 JPG 下載檔分別存放在不同的暫存物件 URL 中,一旦使用者變更設定、挑選新檔案或關閉分頁,這些 URL 就會被撤銷。這樣的生命週期正好符合 Mac 使用者處理一次性檔案轉換的方式:打開、做完、繼續下一件事。

在 Mac 上把 SVG 轉成 JPG

  1. 在 Safari、Chrome 或任何目前版本的 Mac 瀏覽器中打開 SVG to JPG Converter,點擊檔案選擇器,從 Finder、桌面或下載項目中挑選一個獨立的 .svg 檔案。
  2. 等待安全性與尺寸檢查完成。如果檔案超過 5 MiB、含有指令碼、嵌入圖片、遠端字型、foreignObject、事件處理常式,或含有非片段的 CSS 參照,工具會立即拒絕該檔案。
  3. 查看工具偵測到的寬度與高度。這些數字來自 SVG 根元素的正像素寬度與高度,或是當根元素尺寸缺失時來自正值的 viewBox。
  4. 挑選一個實心背景色來取代任何透明區域。預設為白色;由於畫布會在繪製 SVG 之前先填滿,任何其他實心色彩皆可使用。
  5. 挑選介於 0.60 與 1.00 之間的 JPEG 品質。較高的數值能在尖銳的向量邊緣、細小文字、漸層與高對比邊界處保留更多細節,代價是檔案會變大。
  6. 點擊轉檔動作。瀏覽器會將 SVG 解碼到一塊符合偵測尺寸的畫布上,以所選的品質匯出 JPG,並在來源旁邊顯示點陣預覽。
  7. 將預覽與在 Preview 或瀏覽器分頁中開啟的原始 SVG 進行比對,確認版面、色彩與邊緣看起來都正確。
  8. 點擊下載連結,把新的 .jpg 儲存到 Mac 上。重新命名、拖曳到 Finder,或加入 Photos,都和處理任何其他 JPG 完全一樣。

轉檔器接受與拒絕的內容

這個轉檔器刻意只使用比完整瀏覽器 SVG 渲染器更小的子集,因為 SVG 可能帶有主動或連網的功能。在解碼圖片之前,一道共享的稽核會拒絕 script、foreignObject、iframe、object、embed、image、audio、video 與 style 元素。它也會拒絕事件處理常式屬性、行內 style 屬性、xml:base、文件類型與實體宣告、非 XML 處理指令,以及不是本地片段參照的連結或資源屬性。CSS url() 參照僅在指向本地片段時才會被接受,例如 url(#gradient)。接著第二道 DOMParser 檢查會驗證格式良好的 XML、SVG 命名空間中的 SVG 根元素,以及不存在被禁止的元素或不安全的屬性。

SVG 功能轉檔器是否接受
以行內方式定義的本地路徑、基本圖形、文字與漸層是
用於漸層、遮罩、裁剪與濾鏡的 CSS url(#fragment)是,前提是與片段 ID 一起封裝在同一檔案中
樣式區塊、行內 style 屬性,以及 CSS 跳脫或註解技巧否
嵌入圖片、網頁字型、遠端樣式表與連結的 SVG 檔案否
指令碼、事件處理常式、foreignObject、iframe、object、video、audio否
animate、set、animateTransform 等動畫元素否

如果從設計工具匯出的普通 SVG 被拒絕,通常是保守的樣式規則所致。解決方法是請原本的編輯程式把外觀展開為呈現屬性與路徑、移除嵌入圖片、移除指令碼與事件處理常式,並把漸層、遮罩、裁剪與濾鏡封裝在帶有片段 ID 的同一個 SVG 內。一旦儲存這些變更,同一個檔案通常在下一次嘗試時就能通過文字稽核與 DOM 檢查。

背景色彩與 JPEG 品質說明

JPEG 沒有 alpha 通道,因此 SVG 中的透明區域在輸出中無法保持透明。轉檔器會先用所選的實心色彩塗滿整個畫布,再依原始順序將 SVG 繪製在其上方。預設為白色,也是大多數置於白色頁面或投影片上的標誌、圖示與圖表的正確選擇。若預覽需要從白色背景中跳出來,淡灰色或粉彩色會有不錯的效果。無論挑選哪種色彩,結果都會從邊緣到邊緣完全不透明。

品質是與輸出尺寸分開的獨立控制項。滑桿上的數字會直接傳給 JPEG 編碼器;它改變的是壓縮程度,而非像素尺寸。較高的數值能保留更多細節,讓向量圖形的邊緣、細小字型與漸層保持乾淨,但檔案會變大。較低的數值會讓檔案變小,卻可能在尖銳的向量邊緣、細小文字與高對比邊界處引入可見的瑕疵。最低值為 0.60。

品質設定對 JPG 的影響
1.00最大細節;產生最大的檔案
0.85 到 0.95邊緣與細小文字乾淨,檔案大小適中
0.70 到 0.85適合網路上傳、簡報與電子郵件的平衡設定
0.60 到 0.70檔案最小,但代價是尖銳邊緣上會出現可見的瑕疵

輸出尺寸與 Mac 特有的邊界情況

輸出尺寸來自以無單位 CSS 像素或 px 值表示的明確正值根寬度與根高度。若任一可用尺寸缺失,轉檔器會退而採用 viewBox 中的正值寬度與高度。它不會為百分比尺寸、實體單位、缺失的 viewBox 或無效值猜測尺寸,並會將分數尺寸四捨五入為整數畫布像素。單邊最多 8,192 像素,總輸出最多 32,000,000 像素,足以涵蓋從 16 像素的 favicon 到大型海報的所有情境。超過這些上限的檔案,或超過 5 MiB 的輸入檔案,會收到錯誤訊息,而不會被默默重新調整大小。

在 Mac 上,SVG 被拒絕最常見的原因是該檔案是從設計應用程式匯出時帶有樣式區塊、嵌入點陣圖或遠端字型。解決方法是重新匯出時開啟「行內樣式」或「將文字轉外框」,或使用匯出選單中的「扁平化」或「點陣化」選項,然後再把檔案另存成純 SVG 後再上傳。另一個常見原因是尺寸語法:根元素的 width="100%" 或 height="3in" 無法轉成畫布大小,因此轉檔器會要求明確的像素大小或帶有正值的 viewBox。

目前的瀏覽器也必須能成功解析並解碼該檔案。通過文字稽核並不代表每個 SVG 功能都能被所有瀏覽器渲染;字型可用性、濾鏡實作、色彩管理、遮罩、裁剪與 SVG 版本支援都可能不同。如果檔案能在 Safari 中解碼但預覽仍未出現,則會回報錯誤並清除先前任何 JPG,而不會留在畫面上。

這個工具適合與不適合的情境

這個轉檔器是為一般網頁圖形、簡單圖表、由本地路徑構成的標誌、獨立圖示,以及其他符合已記載子集的可信任美術資產所打造。當 Mac 使用者想把 SVG 放進簡報、在聊天中分享平面預覽、發布到不接受 SVG 的平台上的標誌,或在不安裝新軟體的情況下把 JPG 交給同事時,它都是合適的選擇。檔案停留在 Mac 這件事本身,讓它適合處理尚未獲准公開上傳的圖形。

它不是惡意 SVG 的消毒劑,也無法證明檔案可以在其他地方安全發布。它也不會在 JPG 中保留向量、元資料、嵌入字型、動畫、互動、無障礙結構、連結、圖層或來源編輯紀錄。針對歸檔、印刷、色彩嚴格要求或不可信內容的工作流程,請使用有維護的桌面轉檔工具,或使用帶有明確 SVG 安全政策的隔離伺服器管線,並在散布之前檢查輸出。若想進一步了解 Mac 使用者如何透過不同路徑達成相同結果,在 Windows 免軟體將 SVG 轉成 JPG 的教學中介紹了相同瀏覽器流程在另一個作業系統情境下的做法。

下載 JPG 前的快速檢查清單

在下載 JPG 之前,請確認預覽與並排開啟的來源 SVG 一致。檢查所選的背景色已覆蓋整個畫布、文字與細小圖形在所選品質下看起來夠銳利,且偵測到的像素尺寸符合預期。如果有任何地方看起來不對,請變更背景色或品質滑桿;這兩個動作都會清除先前的結果,避免新預覽與舊的混淆。一旦預覽正確,請點擊下載,視需要在 Finder 中重新命名檔案,而原始 SVG 會在原本的位置保持不變。

如果正在權衡各種選項,線上 SVG to PNG 轉檔器是否安全? 有詳細討論。