Base64 轉 SVG

貼上 Base64 編碼的 SVG,即可預覽並儲存原始向量檔案。也可以把它柵格化為 PNG、JPG 或 WebP,或者把點陣圖放進 SVG 外殼中。

完全在瀏覽器中執行,不會上傳任何資料。

使用方法

  1. 貼上 Base64 字串或 data:image/svg+xml;base64 URI。
  2. 檢視預覽以及識別出的格式和尺寸。
  3. 下載格式保持為 SVG。輸入本身是 SVG 時,會以 SVG 文字形式儲存。
  4. 下載 .svg 檔案;如需閱讀或修改程式碼,用編輯器開啟即可。

在 Base64 中識別 SVG

與其他圖片格式不同,SVG 是純文字的 XML。以 <svg 開頭的檔案編碼後以 PHN2Zy 起始,以 XML 宣告(<?xml)開頭的檔案則以 PD94bWwg 起始。Base64 SVG 常見於 CSS 背景圖、圖示庫、設計工具匯出的檔案和郵件模板。MIME 型別為 image/svg+xml。

很多 SVG data URI 其實並不是 Base64,而是百分號編碼的文字,例如 data:image/svg+xml,%3Csvg...。本工具只處理 Base64,這類內容請用 Data URI 生成器解析。

檢視 SVG 原始碼

預覽只能展示圖形的渲染效果,而真正有用的往往是程式碼本身:路徑資料、顏色、viewBox 或內嵌字型。以「原始檔案」或 SVG 格式下載後,用任意文字編輯器開啟即可;也可以把同一段 Base64 貼上到 Base64 解碼,直接以文字形式檢視 XML。

點陣圖轉 SVG 只是包裝,不是向量化

如果 Base64 資料是 PNG、JPEG 等點陣圖,選擇 SVG 會生成一個 SVG 檔案,並把原始像素放在 <image> 元素中。當某個工具只接受 SVG 檔案時,這很方便,但它不會把圖片描摹成向量形狀:放大後依然會模糊,而且由於像素以 Base64 形式存放在檔案裡,體積會比原點陣圖更大。如需真正的向量路徑,請使用 Potrace 或 Inkscape 的「描摹點陣圖」等描摹工具。

處理來源不明的 SVG

SVG 可以包含 <script> 元素、事件處理屬性以及指向外部資源的連結。當 SVG 作為圖片顯示時(通過 <img> 標籤或 CSS 背景),瀏覽器會遮蔽這些內容;但如果直接在瀏覽器標籤頁中開啟檔案,或者把程式碼內聯到網頁裡,它們就可能被執行。對來源不明的 SVG,在這樣使用之前請先檢查或進行淨化處理。

常見問題

能把 PNG 變成真正的向量 SVG 嗎?

不能。把點陣圖轉換為 SVG 只是把圖片嵌入 SVG 檔案中,縮放效果與原點陣圖相同,並不會變成向量圖形。

為什麼 SVG data URI 無法解碼?
請檢查其中是否包含 ;base64,。如果沒有,說明這個 SVG 是百分號編碼或純文字,而不是 Base64,可以用 Data URI 生成器解析。
解碼來源不明的 SVG 安全嗎?

解碼和儲存本身沒有風險,因為結果只是文字。SVG 中的指令碼只有在作為文件開啟,或者內聯插入網頁時才可能執行。

為什麼 SVG 轉成 PNG 後字型或連結圖片不見了?

柵格化 SVG 時,瀏覽器會把它作為圖片載入,而在這種模式下 SVG 無法讀取外部檔案,所以網路字型和連結的圖片會被跳過,改用預設字型顯示。把字型和圖片嵌入 SVG,就能讓檔案自成一體。