有幾十種影象檔案型別，每一種都因壓縮型別、格式和瀏覽器支援而異。但最常用的兩種格式是SVG和PNG格式。
這兩種檔案型別完全不同——每一種都更適合特定情況。它們當然不是在每個方面都可以互換的，但是您可能會發現SVG可以比標準的PNG影象更好地執行特定任務。
瞭解SVG和PNG之間的區別以及它們在您網站上的最佳應用。
什麼是SVG？
SVG代表可縮放向量圖形，它是網路上使用最廣泛的向量檔案格式。讓我們分解一下：
- 可擴充套件： SVG可以在不損害影象質量的情況下向上或向下調整大小。無論大小，它都會非常清晰和清晰。
- 向量：大多數影象檔案型別都包含畫素。向量本質上是實時渲染影象的程式碼片段，將其轉換為您在螢幕上看到的畫素。雖然它們顯示相同的影象，但背景中發生的事情卻大不相同。
- 圖形：雖然可能不太為人所知，但SVG是一種影象檔案型別，如PNG、JPEG或GIF。它只是處理事情有點不同。
向量是用XML編寫的程式碼片段，用於表示形狀、線條和顏色，以詳細說明其工作原理。
雖然只用程式碼建立影象是完全可能的，但大多數人使用向量圖形編輯器，如Inkscape或Adobe Illustrator。您還可以將PNG或其他光柵影象轉換為SVG，但結果並不總是很好。
Convertio是一個PNG到SVG轉換器。
當頁面載入時，此程式碼會轉換為圖形，因此您無法立即將SVG與PNG區分開來。但是因為SVG只是轉換為畫素的程式碼行，這意味著它們可以縮放到任何解析度——無論大小——而不會降低質量。
放大的SVG示例。
SVG還支援動畫和透明度，使其成為一種通用的檔案格式。
唯一的問題是它沒有像PNG這樣更標準的格式那樣廣泛使用，因此它在較舊的瀏覽器和裝置上的支援較少，並且將其上傳到您的網站並使其正確顯示並不總是最容易的。
SVG的優缺點
雖然仍然沒有像PNG這樣的光柵檔案型別那樣廣泛使用，但向量圖形正在迅速流行。它們可以完成一些光柵影象無法完成的基本任務。這就是人們喜歡SVG的原因。
- SVG影象是可縮放的。您可以以任何解析度設計它，並且它可以放大或縮小尺寸而不會損壞質量或變得畫素化。對於光柵影象，您需要從一開始就知道您想要什麼尺寸，否則您可能會冒使影象過大或過小的風險。
- 由於從未經歷過質量損失，SVG始終看起來清晰漂亮。即使稍微調整大小，光柵影象也會開始看起來模糊。
- 由於SVG只是程式碼，它們的檔案大小很小並且經過了良好的優化。還存在SVG優化器，使它們更易於管理。如果您改用它們，您的網站可能會載入得更快一些。
- 與 PNG 不同，SVG 支援動畫。
SVG對比PNG有很多優勢，從可擴充套件到更小，但並非在每種情況下都更好。這是向量檔案型別的缺點。
- 雖然SVG受到所有主要現代瀏覽器的支援，但在舊瀏覽器和裝置上呈現它們時可能會遇到相容性問題。如果您的大量訪問者使用這些，切換可能是一個壞主意。
- SVG更難使用，需要特殊的程式來建立和編輯。雖然您可以只用XML設計它們，但這並不總是可行的。Adobe Illustrator等高階工具可能很昂貴。
- SVG不像PNG那樣容易嵌入。如果您使用的是WordPress，則預設媒體庫不支援它，因此您根本需要一個外掛來上傳它們。
- SVG必須在頁面載入時由瀏覽器呈現，因此使用過多的SVG或包含許多向量的大檔案會給裝置帶來負擔。
何時才考慮將PNG轉換為SVG
雖然您絕對不應該將所有PNG轉換為SVG，但向量圖形可以很好地替代某些影象。
SVG影象特別適用於裝飾性網站圖形、Logo、圖示、圖形和圖表以及其他簡單影象。
應用SVG的網站
但是，它們不適用於涉及多種顏色和形狀的複雜影象，例如螢幕截圖、攝影，甚至是詳細的藝術品。雖然可以將任何影象轉換為SVG，但瀏覽器並不總是能很好地處理具有數百種顏色的複雜向量，因為它們必須在頁面載入時呈現。
此外，SVG藝術作品可以很漂亮，但設計複雜的影象需要大量的時間、精力和對高階編輯工具的熟練程度。如果您想建立向量影象，請保持簡單。
如果您有詳細的影象，請務必堅持使用PNG。
然而，SVG更適合響應式和視網膜就緒的網頁設計，因為它們的可擴充套件性和質量不會下降。此外，它們支援動畫而PNG不支援，支援動畫的光柵檔案型別（如GIF、APNG和WebP）都有其問題。
對於可能需要動畫並保證在任何螢幕尺寸上都能很好縮放的簡單圖形，請使用SVG。
什麼是PNG？
PNG代表行動式網路圖形，這個名稱反映在這種檔案型別的廣泛程度。任何曾經使用過計算機的人都可能使用過PNG，因為它是Internet上僅次於JPEG的最常見的檔案型別。
PNG是一種光柵影象檔案型別，類似於最常見的影象格式。這意味著它由畫素組成，與顯示器或螢幕上顯示的小點相同。雖然這使其易於顯示，但這也意味著影象質量取決於解析度——影象中有多少畫素。
因此，如果您按比例放大或縮小光柵影象，質量將受到影響。有時損壞可以忽略不計，特別是在縮小時，有時它會使影象模糊並完全無法使用。
放大的PNG示例
儘管如此，PNG的流行使其成為通用用途的理想選擇。此檔案型別支援透明度，但不支援動畫。
PNG的優缺點
是什麼讓PNG成為線上使用最廣泛的影象檔案格式？以下是優點：
- PNG檔案可輕鬆編輯並在任何常見的影象編輯工具中開啟。無需為建立或更改 PNG 影象的高階程式付費；最多，您可能需要下載像GIMP這樣的免費編輯器。
- 無論您是從頭開始編碼還是使用WordPress媒體管理器，在您的網站上顯示PNG影象都是一項簡單的任務。
- PNG使用無失真壓縮，使其看起來比有失真壓縮JPEG更清晰。但是，這確實會帶來更大的檔案大小成本，並且無法與向量影象相比。
另一方面，PNG格式是在幾十年前建立的，並且有幾個顯著的缺陷，這些缺陷在現代還沒有更新。
- 您無法在不降低質量的情況下調整PNG檔案的大小。在設計光柵圖形時需要仔細計劃並確保它的大小正確，否則最終可能會浪費時間製作無法使用的影象。
- 由於其無失真壓縮，PNG非常大。因此，他們可以減慢您的網站速度。解決這個問題需要進一步壓縮它並破壞質量。
- 使影象“視網膜就緒”對於PNG來說更加乏味，並且更容易導致模糊。
- PNG不支援動畫。其他動畫光柵檔案型別（如GIF）可能存在嚴重問題；例如，GIF質量極低，僅支援256色。
何時使用PNG而不是SVG
出於某種原因，PNG是最常見的檔案型別；它用途廣泛，幾乎適用於任何情況。使用它時只需要考慮一些缺陷，比如它們的大檔案大小和缺乏可擴充套件性。
PNG適用於顯示詳細影象、藝術作品和攝影作品 — 向量影象無法處理的所有內容。任何具有數百種顏色和高解析度的東西都應該是 PNG。
這並不是說您不能將PNG用於徽標和裝飾圖形等更直接的影象，但SVG更適合該任務。
當您不確定某個平臺是否能夠處理較新的、支援較少的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是兩種截然不同的檔案格式。最後，在非常小眾的用例之外，在您的網站上使用PNG還是JPEG並不是什麼大問題，但在SVG和PNG之間進行選擇是一個更重要的選擇。
您更有可能使用PNG，因為它是一種更簡單、更易於訪問且用途更廣的檔案格式。螢幕截圖和詳細插圖等複雜影象應使用 PNG。
雖然SVG更難建立和編輯，但與PNG相比，它們具有多種優勢。每當適合使用向量影象（例如裝飾圖形和徽標）時，一定要使用SVG。
您不太可能將網站上的每張圖片都換成SVG，但它們的響應能力和較小的檔案大小使它們在某些情況下成為不錯的選擇。
評論留言