SVG vs PNG：有什麼區別以及何時使用它們

已發表: 2021-12-15

有幾十種圖像文件類型，每種都根據壓縮類型、格式和瀏覽器支持而變化。但最常用的兩種格式是 SVG 和 PNG 格式。

這兩種文件類型的區別再大不過了——每一種都更適合特定的情況。它們當然不是在各個方面都可以互換，但您可能會發現 SVG 可以比標準 PNG 圖像更好地執行特定任務。

了解 SVG 和 PNG 之間的區別以及它們在您網站上的最佳應用位置。

什麼是 SVG？

SVG 代表 Scalable Vector Graphics，它是網絡上使用最廣泛的矢量文件格式。讓我們分解一下：

可擴展： SVG 可以在不損害圖像質量的情況下放大或縮小。無論大小，它都會非常清晰。
矢量：大多數圖像文件類型都包含像素。矢量本質上是實時渲染圖像的代碼片段，將其轉換為您在屏幕上看到的像素。雖然它們顯示相同的圖像，但背景中發生的事情卻大不相同。
圖形：雖然它可能不為人所知，但 SVG 是一種圖像文件類型，如 PNG、JPEG 或 GIF。它只是做的事情有點不同。

矢量是用 XML 編寫的代碼片段，表示形狀、線條和顏色，以詳細說明其工作原理。

雖然完全可以用代碼創建圖像，但大多數人使用矢量圖形編輯器，如 Inkscape 或 Adobe Illustrator。您還可以將 PNG 或其他光柵圖像轉換為 SVG，但結果並不總是很好。

將 png 轉換為 svg — Convertio 是一個 PNG 到 SVG 的轉換器。

當頁面加載時，此代碼將轉換為圖形，因此您無法立即將 SVG 與 PNG 區分開來。但是由於 SVG 只是轉換為像素的代碼行，這意味著它們可以縮放到任何分辨率——無論大小——而不會損失質量。

SVG 還支持動畫和透明度，使其成為一種通用的文件格式。

唯一的問題是它不像 PNG 等更標準的格式那樣廣泛使用，因此它在較舊的瀏覽器和設備上的支持較少，而且將其上傳到您的站點並使其正確顯示並不總是最容易的。

想知道 SVG 文件與 PNG 文件有何不同？本指南旨在幫助點擊推文

SVG 的優缺點

儘管仍不如 PNG 等光柵文件類型廣泛使用，但矢量圖形的流行度正在迅速增長。他們完成了一些光柵圖像無法完成的基本任務。這就是人們喜歡 SVG 的原因。

SVG 圖像是可縮放的。您可以以任何分辨率設計它，它會放大或縮小尺寸而不會損壞質量或像素化。對於光柵圖像，您需要從一開始就知道您想要什麼尺寸，否則您可能會冒使圖像太大或太小的風險。
由於從未經歷過質量損失，SVG 總是看起來清晰漂亮。即使稍微調整大小，光柵圖像也會開始看起來模糊。
由於 SVG 只是代碼，因此它們的文件大小很小且經過了很好的優化。 SVG 優化器的存在使它們更易於管理。如果您改用它們，您的網站可能會加載得更快一些。
與 PNG 不同，SVG 支持動畫。

SVG 在 PNG 上有相當多的優勢，從可擴展到更小的尺寸，但並非在每種情況下都更好。這是矢量文件類型的缺點。

雖然 SVG 在所有主要的現代瀏覽器上都享有支持，但您可能會遇到在舊瀏覽器和設備上渲染它們的兼容性問題。如果您的訪問者中有很大一部分使用這些，那麼切換可能是一個壞主意。
SVG 更難使用，需要特殊的程序來創建和編輯。雖然您可以只使用 XML 來設計它們，但這並不總是可行的。 Adobe Illustrator 等高級工具可能很昂貴。
SVG 不像 PNG 那樣容易嵌入。如果您使用的是 WordPress，則默認媒體庫不支持它，因此您需要一個插件來上傳它們。
SVG 必須在頁面加載時由瀏覽器呈現，因此使用過多的 SVG 或包含許多矢量的大文件會對設備造成負擔。

何時使用 SVG 而不是 PNG

雖然您絕對不應該將所有 PNG 轉換為 SVG，但矢量圖形可以很好地替代某些圖像。

SVG 圖像特別適用於裝飾性網站圖形、徽標、圖標、圖形和圖表以及其他簡單圖像。請參閱我們的主頁，了解一個很好的矢量藝術作品示例。

但是，它們不適用於涉及許多顏色和形狀的複雜圖像，例如屏幕截圖、攝影，甚至是詳細的藝術品。雖然可以將任何圖像轉換為 SVG，但瀏覽器並不總是能很好地處理具有數百種顏色的複雜矢量，因為它們必須在頁面加載時呈現。

此外，SVG 藝術品可以很漂亮，但設計複雜的圖像需要大量的時間、精力和熟練的高級編輯工具。如果您想創建矢量圖像，請保持簡單。

如果你有詳細的圖像，一定要堅持使用 PNG。

然而，由於 SVG 的可擴展性和沒有質量下降的情況，SVG 更適合響應式和視網膜就緒的網頁設計。此外，它們支持動畫，而 PNG 不支持，支持動畫的光柵文件類型（如 GIF、APNG 和 WebP）都存在問題。

對於可能需要動畫並保證在任何屏幕尺寸上都能很好地縮放的簡單圖形，請使用 SVG。

什麼是 PNG？

PNG 代表便攜式網絡圖形，這個名稱反映在這種文件類型的廣泛性上。任何使用過計算機的人都可能使用過 PNG，因為它是 Internet 上僅次於 JPEG 的最常見的文件類型。

PNG 是一種光柵圖像文件類型，類似於最常見的圖像格式。這意味著它由像素組成，即在您的顯示器或屏幕上顯示的相同小點。雖然這使它易於顯示，但也意味著圖像質量取決於分辨率——圖像中有多少像素。

因此，如果您放大或縮小光柵圖像的大小，質量會受到影響。有時損害可以忽略不計，尤其是在按比例縮小時，有時它會使圖像變得模糊且完全無法使用。

儘管如此，PNG 的流行使其成為通用用途的良好候選者。此文件類型支持透明度，但不支持動畫。

PNG的優點和缺點

是什麼讓 PNG 成為在線使用最廣泛的圖像文件格式？以下是優點：

PNG 文件可以在任何常用的圖像編輯工具中輕鬆編輯和打開。無需為創建或更改 PNG 圖像的高級程序付費；最多，您可能需要下載像 GIMP 這樣的免費編輯器。
無論您是從頭開始編碼還是使用 WordPress 媒體管理器，在您的網站上顯示 PNG 圖像都是一項簡單的任務。
PNG 使用無損壓縮，使其看起來比有損壓縮 JPEG 更清晰。但是，這確實會帶來更大的文件大小成本，並且無法與矢量圖像相提並論。

另一方面，PNG 格式是幾十年前創建的，並且有幾個尚未更新到現代的顯著缺陷。

您無法在不損失質量的情況下調整 PNG 文件的大小。在設計光柵圖形時，您需要仔細計劃並確保其尺寸合適，否則您最終可能會浪費時間製作無法使用的圖像。
由於無損壓縮，PNG 非常大。因此，它們可能會減慢您的網站速度。解決這個問題需要進一步壓縮它並損害質量。
使用 PNG 使圖像“準備好視網膜”更加繁瑣，並且更可能導致模糊。
PNG不支持動畫。其他動畫光柵文件類型（如 GIF）可能存在嚴重問題；例如，GIF 質量極低，僅支持 256 色。

何時在 SVG 上使用 PNG

PNG 是最常見的文件類型是有原因的；它用途廣泛，幾乎適合任何情況。使用它時需要考慮一些缺陷，例如它們的大文件大小和缺乏可擴展性。

PNG 適用於顯示詳細的圖像、藝術品和攝影——矢量圖像無法處理的所有內容。任何具有數百種顏色和高分辨率的東西都應該是 PNG。

這並不是說您不能將 PNG 用於更直接的圖像，例如徽標和裝飾圖形，但 SVG 會更適合這項任務。

需要一個可以為您提供競爭優勢的託管解決方案？ Kinsta 為您提供令人難以置信的速度、最先進的安全性和自動縮放功能。查看我們的計劃

當您不確定平台是否會處理更新的、受支持較少的 SVG 文件類型時，PNG 是您的最佳選擇——如果只是為了安全的話。

例如，您不能將 SVG 上傳到大多數社交媒體。由於某些電子郵件客戶端可能會遇到矢量問題，因此通常建議在電子郵件模板中堅持使用 PNG。

一般來說，PNG 可以很好地處理任何復雜的非動畫圖像，尤其是那些需要透明度的圖像。您幾乎可以在任何地方使用它；只是有時 SVG 會更合適。

請記住，如果您的 SVG 無法加載，您始終可以使用 PNG 後備，因此即使您的大部分用戶群堅持使用舊設備或瀏覽器，使用矢量通常也是安全的。

哪個是最好的：SVG 還是 PNG？

兩種文件類型都不比另一種更好或更差；每個都有其局限性。儘管 SVG 在某些方面優於 PNG，但 PNG 在處理某些事情方面要好得多。

不過，一般來說，您應該在適當的情況下堅持使用 SVG，並在矢量無法處理的所有其他情況下使用 PNG。在這些情況下，您可能在技術上可以使用其中任何一種，但 SVG 在某些特定領域更可取。

雖然 SVG 支持動畫，但 PNG 不支持。像 GIF 和 APNG 這樣的光柵文件類型可以被認為是替代品。儘管如此，仍然沒有完美的動畫光柵格式得到廣泛支持、廣為人知、質量高、文件大小小。 SVG 滿足所有這些利基。

SVG 還可以完美地縮放到任何屏幕尺寸，使其在默認情況下具有響應性和視網膜就緒。 PNG 在調整大小時會降低質量，並且讓它們很好地縮放是一件麻煩事——尤其是當您只有在大屏幕上無法很好顯示的小圖像時。

最後，SVG 通常比 PNG 小，因此儘管需要在加載時渲染，但它們對您的服務器的負擔更少。

將它們用於您網站上的簡單、純色藝術品、徽標和裝飾圖形。

另一方面，PNG 適合以高分辨率顯示複雜的圖形，或具有數千種顏色的圖片。 SVG 目前無法處理那麼多顏色和形狀。

這些複雜的圖像通常會構成您網站上的大部分圖片，所以現在還不是扔掉 PNG 的時候。

瀏覽器和電子郵件客戶端等特定平台更廣泛地支持 PNG。如果您不確定 SVG 是否會正確渲染，請謹慎行事並使用 PNG。

SVG 和 PNG 可能聽起來很相似，但這兩種流行的文件類型適用於特定情況。在這裡了解更多️ 點擊推特

概括

SVG 和 PNG 是兩種截然不同的文件格式。最後，在非常小眾的用例之外，在您的網站上使用 PNG 還是 JPEG 並不是什麼大問題，但在 SVG 和 PNG 之間進行選擇是一個更重要的選擇。

您更有可能使用 PNG，因為它是一種更簡單、更易於訪問且用途更廣泛的文件格式。屏幕截圖和詳細插圖等複雜圖像應使用 PNG。

雖然 SVG 更難創建和編輯，但與 PNG 相比，它們具有多種優勢。只要適合使用矢量圖像，例如裝飾性圖形和徽標，就一定要使用 SVG。

您不太可能將網站上的每張圖片都換成 SVG，但它們的響應能力和較小的文件大小使它們成為某些情況下的理想選擇。

你是 SVG 還是 PNG 幫派？ 請在下面的評論中與我們的社區分享您的觀點！