PNG 與 SVG 的比較

如果您正在處理高品質的數位標誌和圖形,您可能會考慮將檔案儲存為 PNG 或 SVG。即便是大型檔案,這兩種格式都可提供多功能和高解析度。了解 PNG 與 SVG 之間的主要差異以及如何使用這兩種檔案類型。

PNG 與 SVG 的比較跑馬燈影像

學習內容

 

  • 什麼是 PNG 檔案?
     
  • 什麼是 SVG 檔案?
     
  • PNG 與 SVG 檔案之間有何差異?
     
  • PNG 與 SVG 的比較:常見問答

 

 

什麼是 PNG 檔案?

PNG (Portable Network Graphics,可攜式網路圖形) 是一種點陣型檔案,具備高解析度、不失真壓縮功能、透明度,而且能夠處理 1600 萬種顏色,因而成為圖形、標誌、圖表和插圖以及細節豐富的相片的絕佳選擇。由於 PNG 檔案通常很大,所以不適合用於線上相片。

 

進一步了解 PNG 檔案

 

 

什麼是 SVG 檔案?

SVG (Scalable Vector Graphics,可縮放向量圖形) 非常適合用於標誌和圖形,因為您可以針對不同用途將其放大或縮小。這種檔案在網頁設計中也是受歡迎的選擇,因為 Google 之類的搜尋引擎可以讀取其 XML 程式設計語言,這有助於 SEO 和網站排名。

 

SVG 是以向量為基礎,不同於 PNG。這表示,SVG 使用數學演算法來顯示影像,然後您可以將其縮放成任何大小,而不會對其品質造成負面影響。

 

進一步了解 SVG 檔案

 

 

PNG 與 SVG 檔案之間有何差異?

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 更好的選擇。

 

 

PNG 與 SVG 的比較:常見問答

如何將點陣影像轉換為 SVG?

若要將 JPEG 或 PNG 之類的標準點陣影像檔案轉換為以向量為基礎的 SVG,請依照以下簡易步驟進行:

 

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

 

如何將 SVG 檔案轉換成 PNG 檔案?

請依照以下簡易步驟,使用 Adobe Photoshop 將 SVG 檔案轉換為 PNG 檔案:

 

  1. 開啟 Adobe Photoshop。

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

 

哪一種向量檔案最適合用於列印?

有幾種出色的向量檔案可供列印使用,所以您的選擇取決於文件。PDF 是最多功能的向量格式,可供日常列印使用。如果是大型列印工作,您可能會選擇 SVG 或 AI。

 

我應該使用 PNG 還是 JPEG?

JPEG 的失真壓縮和 24 位元色彩使其成為網頁相片的首選影像檔案格式。不過在列印時,JPEG 的精細度不如 PNG。此外,JPEG 也沒有相同的延展性或清晰度,所以並不是標誌和圖形的最佳選擇。

 

PNG 與 GIF 之間有何差異?

雖然這兩者都是網頁上的標準點陣檔案格式,但 PNG 本質上是新一代的 GIF 版本。不過,兩者之間還是有一些差異,例如,PNG 不支援動畫。

 

PNG 和 SVG 檔案是否有大小的限制?

PNG 檔案上限為 250 兆像素,包括 SVG 在內的向量檔案則沒有大小的限制。

PNG 和 SVG 與其他檔案類型的比較

EPS 與 SVG 的比較影像

EPS 與 SVG 的比較

了解較舊的檔案格式 EPS 與 SVG 的比較情況。

JPEG 與 PNG 的比較影像

JPEG 與 PNG 的比較

從這些標準點陣影像檔案中尋找正確的選擇。

PNG 與 TIFF 的比較影像

PNG 與 TIFF 的比較

探索這些檔案如何管理高清晰的大型影像。 

GIF 與 PNG 的比較影像

GIF 與 PNG 的比較

了解為何 PNG 是新一代的 GIF 以及它是否適合您的下一個專案使用。

取得 Adobe Illustrator

製作精美的向量圖和插圖。

免費試用 7 天,試用期過後,每月只要 NT$672