SVG 檔案格式適合用於網站上顯示二維圖形、圖表和插圖。此外,這種向量檔案可以縮放尺寸的同時保留解析度。進一步了解 SVG 影像的主要功能與優缺點,以及 SVG 格式的發展過程。
可縮放向量圖形 (SVG) 是一種適合網頁使用的向量檔案格式。與 JPEG 等像素型點陣檔案有所不同,向量檔案是透過以網格點線為基礎的數學公式儲存影像。這表示 SVG 這類向量檔可以大幅調整尺寸卻不會損失品質,因此很適合用於標誌及複雜的線上圖形。
當然,SVG 廣受網頁設計師喜受的原因不只是其易於調整尺寸的便利性。由於 SVG 使用 XML 程式碼編寫,因此會將文字資訊儲存成純文字,而非圖形。這使得搜尋引擎 (例如 Google) 可以讀取 SVG 圖形中的關鍵字,並有機會提升網站的搜尋排名。
您可以藉由 .svg 副檔名輕易辨識 SVG 檔案。
SVG 檔案的歷史可追溯到 1990 年代晚期,全球資訊網協會 (W3C) 曾邀請開發人員針對新的向量圖形格式提案。當時協會收到六項提案,最後成功協助 W3C 推出 SVG 格式。
SVG 花了一段時間累積知名度。這種格式在過去鮮少人使用;直到 2017 年,人們發現在新型網頁瀏覽器上使用 SVG 的好處,這種格式才逐漸受到歡迎。現在,SVG 已廣泛用於 2D 網站影像,因為大多數使用向量檔案的瀏覽器和繪圖應用程式都可輕鬆處理此檔案格式。
可縮放向量圖形經歷了漫漫長路才達成現今成就。不過,SVG 在實務上有什麼用處?
設計師常使用 SVG 來顯示按鈕及公司標誌等網站圖示。此檔案類型可以在不損及品質的情況下縮放尺寸,因此很適合用於需在不同位置以各種大小呈現的圖形。
受益於 SVG 使用 XML 程式碼,搜尋引擎 (例如 Google) 能夠讀取含有大量文字的圖表和圖形,並有助於搜尋引擎最佳化。由於 Google 可以偵測 SVG 中的關鍵字,因而有機會提升網頁在搜尋結果中的排名。除此之外,SVG 也支援動畫效果,讓網頁內容變得更豐富有趣。
在將影像儲存為這種檔案格式前,建議您先了解 SVG 的優缺點。
無論您使用 Mac 還是 Windows 作業系統,現在都可透過各種主要瀏覽器 (包含 Chrome、Edge、Safari 和 Firefox ) 開啟 SVG 檔案。只要啟動瀏覽器,按一下「檔案 > 開啟」並選擇要檢視的檔案,所選的檔案就會顯示在瀏覽器中。
在電腦上使用內建程式開啟 SVG 影像也非常簡單。按兩下該檔案名稱,系統就會顯示用來開啟檔案的程式清單,或自動以相容程式開啟該檔案。
使用 Adobe Photoshop 時,請按照以下步驟操作:
實用備註:由於 Photoshop 為點陣圖形編輯程式,因此許多使用者偏好使用 Adobe Illustrator (向量圖形編輯程式) 來製作和編輯 SVG 檔案。
SVG 檔案格式不只是靜態影像。您可以找到種類豐富的線上工具,並利用它們為您的網頁圖形加入動態元素。SVG 動畫可包含較基本的元素,例如滑桿功能可在資訊圖表中的不同投影片之間移動。此外,也能製作動態插圖,像是在時鐘面上滴答作響的指針。
辨識 SVG 檔案最簡單的方法是檢查副檔名代碼。系統會以 .svg 檔案表示 SVG 檔案您也可以將畫面中的影像放大 200% (或以上) 來確認是否為向量影像。如果是向量檔案,影像仍會保有清晰線條和飽滿色彩,而非像素化或變得模糊。
儘管 SVG 影像主要應用於網路,但這種影像的確有更多發揮空間。舉例來說,SVG檔案重新調整尺寸時不會產生扭曲,因此很適合用來製作服飾 (例如 T 恤) 的印花範本。反之,以大量像素製作的 JPEG 檔案就無法在轉換後保有一致的清晰度。
SVG 檔案大小取決於包含的影像資料量,但通常比大多數其他檔案類型來的小。內含大量路徑和錨點的複雜圖形所需的儲存空間大於較為簡潔的設計。因此,您可以試著減少檔案中複雜指示的數量。
簡單來說,SVG 是向量檔案;PNG 則是點陣檔案。如果將 PNG 檔案伸展過大或擠壓過小,就會變得模糊且像素化。SVG 未包含任何像素,因此不會損失解析度。除此之外,PNG 檔案不支援使用動畫。
哪一種檔案格式在網頁設計界較受歡迎?
深入了解兩種檔案的列印成效。