PNG 與 SVG 的比較

點陣與向量的比較

也許 PNG 與 SVG 之間最根本的差異在於一個是點陣檔案類型，另一個是向量檔案類型。

PNG 是點陣 (亦即像素型) 影像格式。如果您將點陣影像放大很高的倍數，它會變顆粒狀和像素化。同樣地，如果影像太小，則可能會變得模糊不清。雖然 PNG 能夠處理極高的解析度，但並不是可無限擴展。

另一方面，SVG 檔案則是以向量為基礎，根據線條、點、形狀和演算法所構成的複雜數學網路建置而成。這種檔案可以擴展到任何大小，而不會降低解析度。

進一步了解點陣與向量的比較情況

檔案大小

PNG 檔案通常很大，所以可以處理高解析度。這樣的大小意味著處理、分享、儲存及開啟檔案都需要較長的時間，也會拖慢頁面載入速度 ， 這也是 JPEG 較常用於線上相片的原因。不過，有一種較小的 8 位元 PNG 變體，但僅支援 256 色。

SVG 檔案比 PNG 小得多，不太可能拖慢電腦或網站的速度。(不過，細節豐富的設計可能會拖慢 SVG。) 由於 SVG 是向量檔案格式，所以可以將其放大或縮小，品質完全不受影響。

壓縮

SVG 提供不失真壓縮 ， 這表示可以將其壓縮成較小的檔案，而不會影響其清晰度、細節或品質。

PNG 也受益於 5-20% 的不失真壓縮，這有助於彌補其檔案較大的情況。不過，PNG 可能還是比 SVG 大。

攝影

如上所述，PNG 檔案不常用於網頁相片，但是可處理細節豐富、高品質的數位相片，以供列印、編輯和其他用途使用。PNG 是 Adobe Photoshop 中的常用檔案格式。

另一方面，SVG 不使用像素 ， 所以很難以高標準的品質顯示相片。

網頁上的使用

PNG 和 SVG 檔案都可以為網頁圖形、插圖、標誌、資訊圖表和表格顯示複雜的細節層次。

不過，SVG 的一個關鍵優勢在於其 XML 程式設計語言。這表示，畫面上顯示的每個 SVG 檔案都是以文字 (而不是程式碼) 編寫。因此，螢幕閱讀程式和搜尋引擎可加以分析，所以 SVG 非常適合用於協助工具和 SEO 等用途。

SVG 檔案通常也比較小，所以可以更快地載入頁面上。頁面載入時間是搜尋引擎排名的另一個關鍵要素。

PNG 也支援一些以文字為主的圖形 ， 但是與 SVG 的程度不能相比。

相容性與複雜性

SVG 被認為是比 PNG 更進階的檔案類型，但實際上並不是每個瀏覽器和作業系統都與其相容。此外，其程式設計語言以及以向量為基礎的撰寫方式可能會讓新使用者覺得陌生且有所畏懼。

另一方面，PNG 則是標準線上格式，受到廣大的網頁瀏覽器和作業系統所支援。

動畫

PNG 檔案不支援動畫，不同於類似的點陣型影像檔案 - GIF。

SVG 檔案可支援動畫，但不像 AI Adobe Illustrator 原生格式等其他檔案類型那麼好用。

進一步了解 AI 檔案

透明度

PNG 和 SVG 都可支援透明度 ， 所以兩者都是線上標誌和圖形的絕佳選擇。

值得注意的是，PNG 是點陣型透明檔案的最佳選擇之一。如果您正在處理像素和透明度，PNG 是比 SVG 更好的選擇。

1. 開啟 Adobe Illustrator。
2. 按一下「檔案 > 開啟舊檔」，並選取電腦上的影像。
3. 按一下「開啟」。
4. 從最上方的選單中，按一下「描圖」選項，然後選取「影像描圖」。
5. 根據您想要的規格來調整轉換結果 ， 其中可能包括改變色彩。
6. 在此程序完成後，選取您的描圖影像，然後按一下「解散群組」。這樣會分離您的顏色形狀。
7. 按一下「檔案 > 匯出」。
8. 將檔案儲存為 SVG。

1. 開啟 Adobe Photoshop。
2. 按一下「檔案 > 開啟舊檔」。
3. 選取電腦上的 SVG 檔案。
4. 按一下「匯出 > 匯出為 > PNG」。
5. 將檔案儲存為 PNG。