WebP 轉 SVG 轉換器
WebP 由像素組成,SVG 由圖形組成,兩者之間沒有無損的轉換方式。本頁會把您的 WebP 描繪成真正的向量路徑,可以任意縮放、改色和切割,最適合標誌、圖示與扁平插圖。
圖片轉 SVG
或將JPG, JPEG, JFIF … 檔案拖曳到這裡 ·
每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除
檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。
較高會保留細小斑點與細緻紋理;較低會捨棄小於數個像素的形狀並清除雜訊。
較高可修圓低解析度或 JPG 來源產生的鋸齒邊緣;較低則保留尖銳的轉角。
平滑曲線適用於大多數圖片,直線段適用於幾何標誌,像素邊緣則可保留像素藝術的方塊感。
僅適用於 PDF 輸入:要轉換的頁面,例如 1 或 1-3, 5。每一頁會成為獨立的檔案。
使用方式
- 1
上傳 WebP
加入從網站儲存的標誌、圖示或貼紙,最多 20 個檔案,每個不超過 95 MB。來源圖片越大、越乾淨,描繪效果越好。
- 2
設定顏色數量
顏色數量預設為 12,足以應付大多數標誌。雙色標誌可調低;若要製作單色刀模檔,請將色彩模式設為黑白。
- 3
向量化為 SVG
按下向量化為 SVG並下載檔案。可用 Inkscape、Illustrator、Figma 或 Cricut Design Space 開啟,檢查形狀是否正確。
真的可以把 WebP 轉成 SVG 嗎?
只能靠描繪。WebP 儲存的是像素,SVG 儲存的是形狀。本工具會把 WebP 的色彩重新繪製成向量路徑;只是更改檔名或嵌入點陣圖的做法,得到的 SVG 放大後仍會模糊。
WebP 轉 SVG:描繪與嵌入的差別
WebP 由 Google 於 2010 年推出,是點陣格式:由一格格彩色像素組成,並壓縮以便網頁快速傳輸。SVG 自 2001 年起成為 W3C 標準,以文字描述線條、曲線與填色。要把前者變成後者,有兩種截然不同的方法,而大多數免費轉換器選擇的是對您沒有幫助的那一種。
嵌入是把 WebP 以 base64 文字寫進 SVG。base64 會讓圖片膨脹約三分之一,結果仍是點陣圖,只是披著向量的外衣。描繪則是本工具與 Inkscape「描繪點陣圖」功能(基於 Potrace 演算法)所採用的方法,它會讀取色塊並寫成路徑。結果是真正可縮放、可編輯,代價是損失細節。我們的圖片轉 SVG指南會說明每項描繪設定。
描繪的 SVG 與嵌入 WebP 的 SVG:各自能做什麼
| 描繪後的 SVG | 包裹 WebP 的 SVG | 原始 WebP | |
|---|---|---|---|
| 任何縮放都清晰 | yes | no | no |
| 可在 Illustrator 或 Inkscape 編輯形狀 | yes | no | no |
| 可作為 Cricut 或雷射切割路徑 | yes | no | no |
| 保留照片細節 | no | yes | yes |
| 一般檔案大小 | 隨細節增加 | 比 WebP 大約多 ⅓ | 最小 |
解碼 WebP
讀取像素與 Alpha 色版,透明區域會先擱置。
歸併顏色
相近的像素會合併成您設定的顏色數量。
繪製路徑
每個色塊區域都會變成平滑的曲線,寫入最佳化後的 SVG。
WEBP
WebP 圖片
WebP 是 Google 於 2010 年推出的圖片格式,目的是讓網頁載入更快。它在同一種格式中同時支援有損與無損壓縮、Alpha 透明度與動畫。在視覺品質相近時,有損 WebP 檔案通常比 JPEG 小 25–35%,無損 WebP 通常也比 PNG 小。目前所有主流瀏覽器都支援,但部分較舊的桌面軟體、列印服務與上傳表單仍然不接受。Windows、macOS 與多數新型圖片編輯軟體都能開啟 WebP 檔案。
- 壓縮方式
- 有損或無損
- 透明度
- 支援
- 動畫
- 支援
- 推出年份
- 2010 · Google
SVG
可縮放向量圖形(SVG)
SVG 是 W3C 於 2001 年標準化、以 XML 為基礎的向量格式。它描述的是形狀、路徑和文字而非像素,因此任何尺寸都保持清晰,用於標誌和圖示時檔案通常非常小。它支援透明度、CSS 樣式、指令碼和動畫,所有瀏覽器都能原生顯示。SVG 不適合照片,複雜的插圖也可能繪製得很慢。Illustrator、Inkscape、Figma 和瀏覽器都能開啟與編輯。
- 壓縮方式
- –
- 透明度
- 支援
- 動畫
- 支援
- 推出年份
- 2001 · W3C
當從網站儲存的標誌或圖示需要能縮放、可編輯或可裁切時,人們就會搜尋 WebP 轉 SVG,而這只有描繪才做得到;反方向則只是為了網頁用途的單純點陣化。
從網站下載的 WebP 如何轉出乾淨的 SVG
大多數想轉成向量的 WebP 檔案都是從網站下載的,也就是已為頁面縮放並經過失真壓縮。邊緣周圍的壓縮雜訊會變成細小的零散形狀,而小圖片的像素太少,描繪時找不到平滑的曲線。請從能找到的最大版本開始;網站的新聞或品牌頁面通常會提供較大的版本或原始 SVG。
有曲線的標誌請讓平滑化維持預設值;邊緣為直線的幾何圖形,則將曲線設為直線。描繪後,請在編輯軟體中刪除殘留的小斑點。如果您只是需要圖片能在某處開啟,而不需要縮放,WebP 轉 PNG是更快且無損的做法。
WebP 轉 SVG 常見問題
為什麼其他 WebP 轉 SVG 工具產生的檔案很模糊?
許多工具只是把 WebP 當作嵌入圖片放進 SVG,再更改副檔名。檔案雖然能以 SVG 開啟,但內容仍是像素,放大會模糊,也沒有可編輯的形狀。用文字編輯器開啟檔案:如果看到很長的 data:image 字串,就表示根本沒有描繪。
WebP 照片可以轉成 SVG 嗎?
可以,但結果會像海報:平滑的漸層與膚色會變成一塊塊平面色帶。照片本來就適合用點陣格式。請將照片保留為 WebP、JPG 或 PNG,只把真正需要的標誌、輪廓或插圖描繪成向量。
WebP 的透明背景轉換後還會是透明的嗎?
可以。透明像素不會產生任何形狀,所以 SVG 在描繪出的圖案後面沒有東西。這通常正是貼紙,或放在彩色背景上的標誌所需要的。
描繪 WebP 標誌時該用幾種顏色?
先數出看得到的純色數量,再加上兩、三個給鋸齒抗除邊緣用的顏色。雙色標誌設為 4 就能乾淨描繪;吉祥物插圖可能需要 16 到 24。顏色太多會在每條邊緣產生細碎的狹長形狀。
SVG 可以用在 Cricut 或雷射切割機嗎?
可以,這正是描繪的主要用途之一。Cricut Design Space 匯入 SVG 時會依顏色分成不同圖層,雷射軟體則會把路徑讀作切割或雕刻線。需要單一切割線時,請使用黑白並搭配僅保留輪廓。
為什麼描繪出的 SVG 看起來比原本的標誌凹凸不平?
網站上的低解析度 WebP 檔案常常只有 100 到 200 px 寬,描繪時只能靠幾個像素去猜曲線。請找尋較大的標誌版本,或先用增加圖片檔案大小放大,再重新描繪。
- PNG 轉 SVG 免費線上轉換免註冊免費將 PNG 轉 SVG:把 Logo、圖示與線稿描摹成可縮放的向量路徑。可選彩色、灰階或黑白,並設定顏色數量。
- JPG 轉 SVG 轉換器將 JPG 描摹成可編輯的向量圖形來轉成 SVG,而不是把像素包進檔案。可設定顏色數量、平滑度與去除背景。
- AVIF 轉 SVG 轉換器將 AVIF 圖片放進 SVG 檔案,供只接受 SVG 的工具使用,並了解何時需要真正的向量描繪。一次 20 個檔案,30 分鐘後自動刪除。
- 照片轉 SVG把照片轉成 SVG 平塗色塊向量圖,適用於鏤空模板、雷射雕刻、轉印貼紙與網版印刷。色數少、曲線平滑,並自動去除背景。
- WebP 轉 PNG 轉換器將 WebP 轉成 PNG 不會失去透明度。Logo、貼圖與去背圖保留透明邊緣;動態 WebP 可輸出第一格或每一格畫面。
- SVG 轉 WebP 轉換器將 SVG 轉成 WebP,寬度依網頁需求設定,並保留透明背景。可選有損或無損輸出,適用 WordPress、社群預覽圖與複雜插圖。