ImgConvert

SVG 轉 WebP 轉換器

將一個大小不超過 20 MB 的 SVG 轉成靜態 WebP,用於支援 WebP 圖片的平台。可依需要設定尺寸、保留原始比例,並選擇失真或無失真編碼。輸出為點陣圖;請保留 SVG,以便編輯及使用可縮放的向量圖。

請選擇一個大小不超過 20 MB 的 SVG。選取後即開始上傳,輸出為靜態 WebP。

輸出尺寸(選填)

每欄可輸入 1–16,383 px。兩欄皆留空時,使用 SVG 本身的尺寸;只填一邊時按比例縮放;兩邊都填時會設定寬高範圍。輸出的寬與高都必須符合此限制。

失真模式提供五種品質預設選項。無失真模式可避免失真的 WebP 編碼,但不會保留向量,也無法修正 SVG 繪製結果的差異。不保證檔案會更小。

較強的壓縮通常會讓檔案更小,但也會流失更多細節;較高的品質通常會讓檔案更大。預設選項並非壓縮百分比,實際大小取決於圖片。即使選擇最高品質,仍使用失真編碼;如需無失真輸出,請切換壓縮模式。

SVG 轉 WebP 轉換器的功能

此轉換器會將 SVG 點陣化為固定尺寸的 WebP 圖片。它會轉換圖片格式,不只是變更檔名。適合需要 WebP 的網站素材、預覽圖或上傳用途;輸出不會保留可編輯路徑、文字物件或 SVG 動畫。

請先確認使用平台支援的格式。要求點陣圖不代表一定接受 WebP。如需 PNG 副本,請使用 SVG 轉 PNG;若要求白色背景的 JPEG,請使用 SVG 轉 JPG。

設定影響適用情況
上傳 .svg接受 SVG 原始檔請上傳有效的 SVG 檔案;僅改名的 PNG 或其他檔案並不是 SVG
寬度與高度保留比例,將繪製後的圖片縮放至選填的尺寸範圍內可設定固定單邊尺寸或寬高範圍;工具不會為了填滿範圍而拉伸或裁切
失真壓縮犧牲可見細節以換取壓縮效果,但不保證檔案更小適合一般網站圖片與預覽圖
品質與檔案大小控制失真 WebP 的壓縮強度建議先使用「平衡」預設選項
無失真壓縮避免失真的 WebP 壓縮適合圖示、標誌、UI 圖形或銳利邊緣

如何在線上將 SVG 轉成 WebP

1

上傳 SVG 檔案

請選取或拖曳一個大小不超過 20 MB 的 SVG。選擇檔案後即開始上傳至伺服器處理。請等待上傳完成,並確認選取了正確的原始檔;瀏覽器預覽不保證與伺服器繪製結果完全一致。

2

設定 WebP 輸出尺寸

兩欄皆留空時,使用繪製器解析出的 SVG 固有尺寸。輸入一邊可按比例計算另一邊;兩邊都填時,會縮放至矩形範圍內,不會裁切或拉伸。1200×800 的原始圖片縮放至 600×600 的範圍內,結果會是 600×400,而非正方形。

  • •每個選填欄位可輸入 1–16,383 px,最終輸出的寬與高也都必須在 16,383 px 以內。兩欄皆留空或只填一邊,都不能避開此限制。若顯示寬度為 300 px,600 px 是以 2× 尺寸匯出的選項,並不保證每個原始檔的效果都會提升。
3

選擇壓縮模式與品質

失真模式提供五種預設選項:強力壓縮、適度壓縮、平衡、高品質與最高品質,預設為「平衡」。即使「最高品質」仍使用失真編碼;請檢查結果中的細線、漸層與文字,不要將選項名稱視為品質保證。

  • •如需避免失真的 WebP 編碼,請選擇獨立的「無失真」模式,選取後會隱藏品質選擇器。它不會修正繪製差異,也不會保留向量路徑、字型、連結、來源中繼資料或無限縮放能力。輸出為 8 位元圖片。
4

轉換並檢查下載的 WebP

請點選「轉換成 WebP」並下載完成的圖片。依預期設計比較尺寸、文字、色彩、透明邊緣與檔案大小。替換原本可正常使用的素材前,請先在預計使用的應用程式中測試檔案,並保留原始 SVG。

SVG 繪製、透明度與品質

SVG 儲存形狀、路徑、文字與樣式;WebP 儲存繪製後的像素。選擇匯出設定前,請先確認以下特性。

問題預期結果
輸出仍是向量圖嗎?不是。WebP 檔案是像素尺寸固定的點陣圖。
WebP 可以保留透明度嗎?可保留原有透明區域。原本繪製在圖稿後方的白色或彩色圖形,仍是圖片的一部分,不會被移除。
無失真模式會保留 SVG 品質嗎?無失真適用於繪製後的 WebP 編碼,不會保留 SVG 結構,也不保證伺服器繪製器的結果與瀏覽器或設計應用程式相同。
字型一定會相同嗎?裝置上可用的字型,伺服器上不一定有。若重要文字的外觀必須精確一致,請在原始編輯器中將其轉為外框。
外部 CSS 或連結圖片都會被繪製出來嗎?連結資源或不支援的樣式可能缺失或顯示不同。請匯出內含所需圖片與必要樣式的完整 SVG,並檢查下載結果中的遮色片與濾鏡效果。

請明確設定 viewBox 與所需的畫布邊界。SVG 畫布內的透明空白仍是圖片的一部分,調整尺寸不會將其裁掉。伺服器採用靜態繪製,不會播放動畫或執行指令碼來重現瀏覽器的互動狀態。

何時適合用 WebP 取代 SVG

WebP 副本適合以下固定尺寸的使用位置。請確認使用平台的格式、像素尺寸與檔案大小要求。

CMS 上傳

當 CMS 支援 WebP、卻不接受 SVG 時,可使用 WebP 副本;仍須符合該系統的上傳檔案大小與尺寸限制。

社群預覽圖

請確認分享平台的預覽圖規則。只有支援時才使用 WebP;否則請選擇匯出為支援的 PNG 或 JPG。

電子郵件圖片

請確認郵件編輯工具與收件者的郵件應用程式是否支援 WebP。若流程要求 PNG 或 JPG,請改為匯出該格式。

網站圖片

WebP 副本適合以已知尺寸顯示的圖稿。替換 SVG 素材前,請比較外觀與實際檔案大小。

應用程式或市集素材

請確認確切的格式與像素要求。只要求點陣圖,並不代表一定接受 WebP。

設計交付預覽

若審閱者使用的檢視工具支援 WebP,可分享靜態預覽;請同時保留 SVG,以便日後調整設計。

請保留 SVG 作為原始檔,並為需要點陣圖的用途匯出 WebP 副本。如果正在建立響應式圖示系統,或之後需要編輯形狀,SVG 仍可能是更適合的主檔格式。

選擇適合的 SVG 轉 WebP 設定

最適合的設定取決於圖稿及 WebP 的使用位置。小型扁平圖示、細節豐富的插畫與全寬網站圖形,並不需要相同的匯出選項。

輸出目標建議設定原因
網站圖示顯示寬度或兩倍寬度(2×),無失真避免邊緣因失真編碼而改變;請檢查實際的點陣圖結果
標誌預覽兩倍顯示尺寸(2x),搭配無失真、「高品質」或「最高品質」有助於保持曲線與文字狀圖形的清晰度
大型插畫預計顯示的寬度,搭配「平衡」或「高品質」兼顧細節與檔案大小
檔案較小的縮圖較小尺寸,搭配「強力壓縮」、「適度壓縮」或「平衡」可能縮小檔案;請檢查下載檔案的位元組數與可見細節
透明疊加圖片含透明區域的 WebP,搭配「平衡」、較高品質的預設選項或無失真模式控制壓縮的同時保留透明背景

請依實際顯示位置選擇尺寸,不要直接使用可輸入的最大值。放大 SVG 內嵌的點陣圖,無法還原其中缺失的細節。若問題是空白過多,請在原始編輯器中調整 SVG 畫布或 viewBox;提高品質不會移除空白。

檔案處理與實際限制

選取一個大小不超過 20 MB 的 SVG 後,即開始上傳至伺服器處理。20 MB 限制的是檔案大小;輸出每邊 16,383 px 限制的是尺寸。很小的 SVG 檔案仍可能描述過大的畫布,或包含繪製器無法處理的內容。

此流程會從上傳的檔案匯出一張靜態 WebP,沒有 SVG 程式碼欄位、向量編輯器、動畫錄製或影格時間選擇功能。如需使用 SVG 程式碼,請先儲存為完整且有效的 .svg 檔案,並將所需樣式與圖片資源一併包含在該檔案中。

上傳檔案與產生的檔案均為暫存,請儘速下載 WebP,並保留 SVG 以便日後編輯。

應避免的常見錯誤

將 .svg 改名為 .webp

變更副檔名不會將 SVG 轉成 WebP。真正的轉換必須先繪製 SVG,再將結果編碼成 WebP 圖片檔案。

期待 WebP 像 SVG 一樣可編輯

下載的 WebP 是點陣圖,無法像原始 SVG 一樣編輯路徑、形狀或文字。請保留 SVG 作為可編輯的原始檔。

將無失真模式視為保留向量的保證

無失真是 WebP 的編碼選項,無法還原向量、補上缺少的字型、修正不支援的 SVG 功能,也無法還原先前的繪製與尺寸調整。即使使用無失真模式,也請檢查匯出的圖片。

依賴外部字型或 CSS

上傳原始檔的預覽與伺服器繪製,可能使用不同資源與繪製功能。請將所需圖片與樣式包含在 SVG 中,將重要文字轉為外框,並檢查下載結果,不要只依賴預覽。

匯出尺寸過大的 WebP

請依最終用途選擇輸出尺寸。過大的 WebP 可能浪費空間或超過使用平台的限制,而簡單的 SVG 本身可能已經更小。調整尺寸會保留整個 SVG 畫布,包括其中原有的空白。

常見問題

不是。五種品質預設選項都使用失真的 WebP 編碼。如需避免這項編碼失真,請選擇獨立的「無失真」模式。兩種模式都不會保留可編輯向量,也不保證與每個 SVG 檢視器的結果一致;繪製發生在 WebP 編碼之前。

這些數值定義的是寬高範圍。圖片會保留比例,因此 1200×800 縮放至 600×600 的範圍內,結果會是 600×400,不會被裁切或拉伸成正方形。如果只需要固定一邊的尺寸,請填寫該邊即可。

伺服器可能缺少預覽所使用的字型或資源,部分 SVG 功能的繪製結果也可能不同。請匯出內含所需資源的 SVG、將重要文字轉為外框,並檢查遮色片與濾鏡效果。提高 WebP 品質無法補上缺失的原始內容。

不會。原有透明區域可以保留,失真 WebP 也一樣。原本繪製在 SVG 中的白色矩形或其他背景,仍是圖片的一部分。如需透明背景,請在匯出前先於原始編輯器中移除背景。

不行。此頁面只會產生靜態繪製結果,不會錄製動畫、執行指令碼,也沒有時間或影格選擇器。請準備包含所需畫面狀態的靜態 SVG,或另外使用動畫匯出流程。

檔案大小只是其中一項限制。SVG 必須能被繪製器讀取,而且輸出的寬與高都必須在 16,383 px 以內。小檔案也可能描述巨大的畫布;內容缺失或不受支援,也可能導致無法取得預期結果。請檢查原始檔並選擇適當尺寸。

此頁面沒有程式碼輸入欄位。請將完整的 SVG 標記內容儲存為有效的 .svg 檔案,再上傳。將其他圖片或不完整的文字片段改名,並不會讓它成為可用的 SVG。

簡單的 SVG 可以用很少的資料描述形狀,而 WebP 儲存的是點陣圖。尺寸、圖稿與編碼模式會決定檔案大小。請比較下載結果;此工具沒有精確的 KB 目標,也不保證 WebP 會更小。

線上將 SVG 轉成 WebP

選擇 SVG、設定尺寸與壓縮方式,並在發布前於實際使用的平台檢查 WebP。