SVG 檔案

學習內容

• 什麼是 SVG 檔案？
   
• SVG 檔案的歷史
   
• SVG 檔案有什麼用處？
   
• SVG 檔案的優缺點
   
• 如何開啟 SVG 檔案
   
• 如何建立和編輯 SVG 檔案
   
• SVG 檔案：常見問答

什麼是 SVG 檔案？

可縮放向量圖形 (SVG) 是一種適合網頁使用的向量檔案格式。與 JPEG 等像素型點陣檔案有所不同，向量檔案是透過以網格點線為基礎的數學公式儲存影像。這表示 SVG 這類向量檔可以大幅調整尺寸卻不會損失品質，因此很適合用於標誌及複雜的線上圖形。

當然，SVG 廣受網頁設計師喜受的原因不只是其易於調整尺寸的便利性。由於 SVG 使用 XML 程式碼編寫，因此會將文字資訊儲存成純文字，而非圖形。這使得搜尋引擎 (例如 Google) 可以讀取 SVG 圖形中的關鍵字，並有機會提升網站的搜尋排名。

您可以藉由 .svg 副檔名輕易辨識 SVG 檔案。

SVG 檔案的歷史

SVG 檔案的歷史可追溯到 1990 年代晚期，全球資訊網協會 (W3C) 曾邀請開發人員針對新的向量圖形格式提案。當時協會收到六項提案，最後成功協助 W3C 推出 SVG 格式。  

SVG 花了一段時間累積知名度。這種格式在過去鮮少人使用；直到 2017 年，人們發現在新型網頁瀏覽器上使用 SVG 的好處，這種格式才逐漸受到歡迎。現在，SVG 已廣泛用於 2D 網站影像，因為大多數使用向量檔案的瀏覽器和繪圖應用程式都可輕鬆處理此檔案格式。

SVG 檔案有什麼用處？

可縮放向量圖形經歷了漫漫長路才達成現今成就。不過，SVG 在實務上有什麼用處？

網站圖示和標誌

設計師常使用 SVG 來顯示按鈕及公司標誌等網站圖示。此檔案類型可以在不損及品質的情況下縮放尺寸，因此很適合用於需在不同位置以各種大小呈現的圖形。

資訊圖表和插圖

受益於 SVG 使用 XML 程式碼，搜尋引擎 (例如 Google) 能夠讀取含有大量文字的圖表和圖形，並有助於搜尋引擎最佳化。由於 Google 可以偵測 SVG 中的關鍵字，因而有機會提升網頁在搜尋結果中的排名。除此之外，SVG 也支援動畫效果，讓網頁內容變得更豐富有趣。

探索更多有關向量檔案的內容

SVG 檔案的優缺點

在將影像儲存為這種檔案格式前，建議您先了解 SVG 的優缺點。

SVG 檔案的優點

• 與像素組成的點陣檔案不同，SVG 等向量圖型無論如何縮放大小，都可維持解析度。因此您不必擔心將 SVG 影像用於特定瀏覽器，或重新調整尺寸以顯示在不同位置時，影像會損失原有品質。
   
• 基本 SVG 檔案採用數學演算法，檔案大小時常比使用大量彩色像素建構的點陣影像來的小。
   
• SVG 檔案將文字視為文字 (而非設計) 處理，因此螢幕閱讀程式可以掃描 SVG 影像包含的任何文字。這對於閱讀網頁需要幫助的使用者來說非常有用；此外，搜尋引擎也可讀取 SVG 影像文字並建立索引。

SVG 檔案的缺點

• SVG 檔案很適合用在標誌、插圖和圖表這類網頁圖形，但因為缺少像素而難以顯示高品質的數位相片。一般來說，細節豐富的相片比較適合採用 JPEG 檔案格式。
   
• 只有新型瀏覽器支援 SVG 影像。您會發現 SVG 檔案很難用於 Internet Explorer 8 和其他較舊的瀏覽器。
   
• 如果您不熟悉這種檔案格式，可能會難以理解 SVG 影像中的程式碼。

如何開啟 SVG 檔案

無論您使用 Mac 還是 Windows 作業系統，現在都可透過各種主要瀏覽器 (包含 Chrome、Edge、Safari 和 Firefox ) 開啟 SVG 檔案。只要啟動瀏覽器，按一下「檔案 > 開啟」並選擇要檢視的檔案，所選的檔案就會顯示在瀏覽器中。

在電腦上使用內建程式開啟 SVG 影像也非常簡單。按兩下該檔案名稱，系統就會顯示用來開啟檔案的程式清單，或自動以相容程式開啟該檔案。

如何建立和編輯 SVG 檔案

使用 Adobe Photoshop 時，請按照以下步驟操作：

1. 在 Photoshop 中完成製作影像後，按一下「檔案 > 匯出」> 匯出為」。
    
2. 在隨即顯示的方塊中按一下「格式」下拉式選單，然後選取「SVG」。
    
3. 選取「全部匯出」，然後按一下「儲存」。

實用備註：由於 Photoshop 為點陣圖形編輯程式，因此許多使用者偏好使用 Adobe Illustrator (向量圖形編輯程式) 來製作和編輯 SVG 檔案。

SVG 檔案：常見問答

SVG 檔案是否支援使用動畫？

SVG 檔案格式不只是靜態影像。您可以找到種類豐富的線上工具，並利用它們為您的網頁圖形加入動態元素。SVG 動畫可包含較基本的元素，例如滑桿功能可在資訊圖表中的不同投影片之間移動。此外，也能製作動態插圖，像是在時鐘面上滴答作響的指針。

如何辨識 SVG 檔案？

辨識 SVG 檔案最簡單的方法是檢查副檔名代碼。系統會以 .svg 檔案表示 SVG 檔案您也可以將畫面中的影像放大 200% (或以上) 來確認是否為向量影像。如果是向量檔案，影像仍會保有清晰線條和飽滿色彩，而非像素化或變得模糊。

SVG 檔案是否只能應用在網路上嗎？

儘管 SVG 影像主要應用於網路，但這種影像的確有更多發揮空間。舉例來說，SVG檔案重新調整尺寸時不會產生扭曲，因此很適合用來製作服飾 (例如 T 恤) 的印花範本。反之，以大量像素製作的 JPEG 檔案就無法在轉換後保有一致的清晰度。

SVG 檔案有多大？

SVG 檔案大小取決於包含的影像資料量，但通常比大多數其他檔案類型來的小。內含大量路徑和錨點的複雜圖形所需的儲存空間大於較為簡潔的設計。因此，您可以試著減少檔案中複雜指示的數量。

SVG 和 PNG 檔案有何不同？

簡單來說，SVG 是向量檔案；PNG 則是點陣檔案。如果將 PNG 檔案伸展過大或擠壓過小，就會變得模糊且像素化。SVG 未包含任何像素，因此不會損失解析度。除此之外，PNG 檔案不支援使用動畫。