PNG 轉 SVG 轉換器
將點陣 PNG 圖片封裝在 SVG XML 向量容器內,以實現響應式網頁縮放與相容向量的版面整合。
格式比較與技術規格
| 規格 | PNG | SVG |
|---|---|---|
| MIME 類型 | image/ | image/ |
| 類型 | 點陣圖 | 向量圖 |
| 壓縮 | 無損(DEFLATE / LZ77 + Huffman) | 無損 XML 文字(可透過 .svgz 進行 GZIP 壓縮) |
| 標準規格 | W3C PNG 3rd Edition | W3C SVG 2 Specification |
| 檔案簽章(magic bytes)標頭 | 89 50 4E 47 0D 0A 1A 0A | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) |
格式概述與應用
將 PNG 檔案轉換為 SVG 格式會將點陣圖包裹在 XML 向量容器內,讓網頁開發人員和平面設計師能夠將點陣圖形直接嵌入可縮放的向量工作流程中。點陣 PNG 圖片使用固定顏色的像素網格。將此圖形包裝成 SVG 檔案可保留原始的像素尺寸與透明度,同時讓圖片能直接嵌入以 SVG 為主的網頁版面與響應式 UI 檢視區中。網頁設計師經常執行這項轉換,以便將點陣圖形整合到 SVG 精靈圖(sprite sheet)、向量插畫工作流程和響應式網站中,而無需管理獨立的外部圖片檔案。產生的 SVG 會將整個圖形以自包含的形式封裝在標準 XML 標記中。
技術規格與編解碼器解析
PNG 檔案是 MIME 類型為 image/png 的點陣圖。它以檔案簽章(magic bytes)標頭 89 50 4E 47 0D 0A 1A 0A 開頭,後面接著使用 DEFLATE 演算法壓縮的資料區塊,該演算法結合了 LZ77 滑動字典與霍夫曼編碼(Huffman coding)。相較之下,SVG 檔案使用 MIME 類型 image/svg+xml,並結構化為 XML 文件。在轉換過程中,引擎會在瀏覽器端記憶體中將圖片點陣化,將位元點陣圖序列化為 PNG,並將圖片以 Base64 資料 URI 的形式嵌入 SVG 的 <image> 容器元素中。這會將圖形封裝成具有指定 viewBox 尺寸且獨立完整的 SVG 檔案。
作業系統與瀏覽器相容性
SVG 檔案在現代網頁瀏覽器(包含 Windows、macOS、Android 和 iOS 等桌面與行動作業系統上的 Chrome、Firefox、Safari 和 Edge)中享有廣泛支援。Adobe Illustrator、Inkscape 和 CorelDRAW 等圖片檢視器與設計套件可原生處理 SVG 編輯。PNG 檔案也同樣具備廣泛支援的瀏覽器與作業系統相容性,但檢視原始 SVG 標記需要任何標準文字編輯器。
實用資訊
由於此轉換會將點陣圖嵌入 XML 容器中而非描繪向量路徑,因此該圖形能夠保留精確的像素細節與 Alpha 透明度,同時維持與 SVG 算繪器的完全相容性。
常見問題
如何在不失真的情況下將 PNG 圖片轉換為 SVG 向量圖?
此轉換器將高解析度 PNG 點陣圖直接封裝在 SVG XML 包裝中,作為嵌入式 Base64 資料流。這樣可以在不進行有損壓縮的情況下保留像素顏色與透明度。
PNG 圖片與 SVG 向量圖有什麼區別?
PNG 是一種點陣圖格式,將視覺資料儲存為使用 DEFLATE 壓縮的彩色像素固定網格,使檔案大小取決於像素尺寸。SVG 是一種向量圖格式,將視覺資料儲存為以 XML 文字寫入的可縮放數學指令,允許圖片無限縮放而不會產生像素化。