卡卡網(wǎng)

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

這兩種文件類型的區(qū)別再大不過了——每一種都更適合特定的情況。

什么是 SVG？

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

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

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

雖然完全可以用代碼創(chuàng)建圖像，但大多數(shù)人使用矢量圖形編輯器，如 Inkscape 或 Adob??e Illustrator。你還可以將 PNG或其他光柵圖像轉(zhuǎn)換為 SVG，但結果并不總是很好。

• 6種Web圖像文件優(yōu)缺點比較：JPEG/PNG/SVG/GIF/BMP/WebP
• 瀏覽器直接保存SVG為PNG圖片的方法
• 在線svg-to-png，svg轉(zhuǎn)png，svg2png，支持透明背景

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

 
放大的SVG示例

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

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

SVG 的優(yōu)缺點

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

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

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

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

何時使用 SVG 而不是 PNG

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

SVG 圖像特別適用于裝飾性網(wǎng)站圖形、徽標、圖標、圖形和圖表以及其他簡單圖像。

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

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

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

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

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

什么是 PNG？

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

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

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

 
放大的PNG示例

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

PNG的優(yōu)點和缺點

是什么讓 PNG 成為在線使用最廣泛的圖像文件格式？以下是優(yōu)點：

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

另一方面，PNG 格式是幾十年前創(chuàng)建的，并且有幾個尚未更新到現(xiàn)代的顯著缺陷。

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

何時在 SVG 上使用 PNG

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

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

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

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

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

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

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

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

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

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

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

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

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

將它們用于你網(wǎng)站上的簡單、純色藝術品、徽標和裝飾圖形。

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

這些復雜的圖像通常會構成你網(wǎng)站上的大部分圖片，所以現(xiàn)在還不是扔掉 PNG 的時候。

并且 PNG 在瀏覽器和特定平臺（如電子郵件客戶端）上得到更廣泛的支持。如果你不確定 SVG 是否會正確渲染，請謹慎行事并使用 PNG。

總結

SVG 和 PNG 是兩種截然不同的文件格式。最后，在非常小眾的用例之外，在你的網(wǎng)站上使用 PNG 還是 JPEG 并不是什么大問題，但在 SVG 和 PNG 之間進行選擇是一個更重要的選擇。

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

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

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

相關文章

• 6種Web圖像文件優(yōu)缺點比較：JPEG/PNG/SVG/GIF/BMP/WebP
• 瀏覽器直接保存SVG為PNG圖片的方法
• 在線svg-to-png，svg轉(zhuǎn)png，svg2png，支持透明背景

標簽: image  圖像格式文件