可縮放矢量圖形 (SVG) 圖像格式指南

您無法擺脫互聯網的一個方面：圖像。 在網絡的早期，這是一個嚴格的、純文本的事情。 但是，我們現在有專門的圖像格式來幫助我們顯示清晰的視覺效果。 可縮放矢量圖形 (SVG) 格式是可用的最新和最靈活的格式之一。

我們稍後會詳細解釋，但 SVG 是在前端顯示為圖像的數據集合。 這意味著您可以使用級聯樣式表 (CSS) 來操作圖像。 更重要的是，您可以根據需要調整它的大小而不會降低質量。

在這篇文章中，我們將更多地討論可縮放矢量圖形以及它們如何為您提供幫助。 我們還將討論如何將它們包含在您的 WordPress 網站上。

最常見 Web 圖像格式的快速入門

在我們討論 SVG 以及如何使用它們之前，有必要談談我們用於 Web 的主要圖像格式。 有三點需要注意：

• 聯合圖像專家組 (JPEG)。 顧名思義，如果您想顯示用數碼相機拍攝的照片，這是適合您的格式。
• 便攜式網絡圖形 (PNG)。 您需要使用 PNG 格式來顯示任何創建的圖形，例如來自 Adob​​e Illustrator 的圖形。
• 圖形交換格式 (GIF)。 嘿，每個人都喜歡有趣的電視節目片段，用作社交媒體上的反應！ GIF 是可移植的動畫圖形的完美格式。

雖然有些人會選擇他們喜歡的任何格式，但這不會是最佳方法。 例如，如果您選擇將每張圖像製作成 GIF，您可能會看到天文數字的文件大小和低質量的視覺效果。 相反，您不會希望將 JPEGS 用於圖形，因為 PNG 是一種更理想的格式。

什麼是可縮放矢量圖形格式

您將希望在本節中與我們一起忍受，因為我們將在某些領域獲得技術。 此外，SVG 的概念可能會令人困惑。

可縮放矢量圖形不存在（有點）。 事實上，它們根本不是圖形或圖像，而是可擴展標記語言 (XML) 的一種形式。 對於不知情的人，這是與 HTML 的近親，但沒有該語言的某些方面（例如預定義的標籤）。

作為一個你可能已經理解的比較，考慮如何使用 CSS 創建形狀。 這是我們稍後將討論的更多內容。 好吧，想像一下這個 CSS 被烘焙到一個文檔包裝器中，​​您使用標准文件格式和結構（例如image.svg ）調用它。

更準確地說，由於 HTML 提供了一個框架來定義標題、段落、部分、列表等，而 SVG 提供了一個框架來定義諸如圓形和矩形之類的形狀。 然而，這仍然不能解釋為什麼我們有（有時需要）SVG 格式。 我們接下來會談到這個。

為什麼我們有 SVG

在 SVG 之前，您將使用 PNG 來顯示圖形。 網絡上的早期圖像可能是 GIF，但一般來說，PNG 是主要的圖像格式。 問題不是：“為什麼我們有 SVG？”，更多的是“當前的圖像格式缺少 SVG 可以解決的問題？” 答案是：活力。

如果您回顧一下主要的網絡圖像格式，有兩種格式並不適合創建的圖形（JPEG 和 GIF）。 這讓 PNG 承受壓力。 然而，PNG 存在一些現在才在現代網絡中顯而易見的問題：

• 它們是靜態的，因為您可以離線創建圖像，並將其導出為特定格式。 這意味著它有些不靈活。
• 通過擴展，您無法更改圖像的“化妝”。 鑑於我們要創建和顯示許多設備，您有時需要適應這些“視口”。 努力為使用 PNG 的台式機和主要移動設備創建所有徽標尺寸。
• 雖然 PNG 可能很輕，但設計師和網站所有者有責任確保進行圖像優化。 PNG 可能很重，有時超過一兆字節，沒有任何優化。

此外，PNG 填補了部分空白，當時很少有選項可以提供足夠高的圖像質量。 那時，CSS 還處於起步階段，我們還沒有現在所做的設計和開發範圍。

例如，自 2010 年以來，我們只能使用border-radius屬性。這使您可以定義圓形邊緣甚至圓形。 你會在很多按鈕上看到它的作用：

您將使用 CSS 來創建可以縮放並適應屏幕的形狀，但可縮放矢量圖形可以做得更多。 實際上，您現在將使用 SVG 而不是 CSS 來執行此操作，儘管它們也不是靈丹妙藥。

可縮放矢量圖形的優點

就像所有其他圖像格式一樣，可縮放矢量圖形並不完美。 當然，有很多積極的方面：

• SVG 適合設備的尺寸，通常無需您進一步干預。 這減少了您的開發或創建時間。
• 圖像的關聯文件很小，因為您只需要一個 SVG。 相比之下，PNG 徽標需要提供幾種不同的尺寸和尺寸。 這會佔用服務器空間。
• 更重要的是，SVG 比 PNG 的性能更高，因為您只需要以千字節為代價加載一個文件。 該 PNG 文件包可能以兆字節為單位，具體取決於它們的質量、數量和優化。

總體而言，您可以使用 SVG 做的事情比任何其他圖像格式都多。 開發人員和圖形設計師都可以創建 SVG - 通過代碼或從專用繪圖應用程序導出典型創建。 因為它們更緊密地與網絡的發展聯繫在一起，所以採用率正在增加。

可縮放矢量圖形的缺點

然而，並非一切都是美好的。 SVG 仍然有一些您需要注意的問題：

• 與大多數其他核心網絡方面不同，該技術正在發展。 因為許多人對 Scalable Vector Graphics 的期望很高，所以在您可以做的事情和您想做的事情之間存在“差距”。
• 雖然大多數瀏覽器都提供基本的 SVG 支持，但仍無法使用完整的功能集，具體取決於您使用的瀏覽器。 同樣，SVG 具有更多尚未顯現的潛力：我們需要更好的瀏覽器支持來獲得更高級的功能，以了解該格式的功能。
• 在某些情況下，您可能會發現 SVG 圖像不太準確或看起來完全不正確。 這是因為您必須像您期望的那樣依賴網站加載。 如果您還記得由於錯誤而不得不重新加載網頁的時間，那麼僅使用您的 SVG 圖像來想像這種情況。

我們還要說，在某些情況下，如果沒有編碼知識，創建 SVG 會更難。 在 Affinity Designer 和 Adob​​e Illustrator 等圖形程序中有更好的支持。 Google Drawing 等應用程序也支持 SVG 導出：

這是一個改進的領域，但與其他圖像格式相比仍然稍有落後。

儘管有這些缺點，但您可以減輕它們的影響。 當然，對於基本用法，您幾乎可以立即實現它們。 事實上，WordPress 甚至通過幾個步驟就提供了這種支持，我們將在接下來討論這個問題。

如何在您的 WordPress 網站上使用 SVG

壞消息是，如果您想在不做任何工作的情況下將 SVG 上傳到 WordPress，您將無法做到。 當前 Scalable Vector Graphics 支持的一個額外問題是，出於安全原因，WordPress 不允許您將這些圖像作為標准上傳：

原因超出了本文的範圍。 簡而言之，由於 SVG 格式是文檔而不是實際圖像，惡意用戶可以構建潛在的腳本攻擊。 這意味著您需要找到更安全的替代方案。

在 Web 的其他地方，您會看到向您的 functions.php 文件添加一些代碼以啟用 SVG 上傳的說明。 但是，我們不會執行此步驟，因為我們無法保證它是安全的。 相反，你可以做你經常用 WordPress 做的事情：轉向插件。 我們推薦 SVG 支持：

安裝並激活插件後，前往 WordPress 中的設置 > SVG 支持屏幕。 這將顯示幾個屏幕，但您只需要勾選限制為管理員？ 設置面板中的複選框。

默認情況下，該插件將允許所有用戶上傳 SVG。 基於固有的安全問題，這可能是個壞消息，這正是 WordPress 不允許您首先上傳這些文件的原因。 但是，如果您勾選此框，該插件將限制上傳給站點管理員，同時使標準使用 SVG 更加​​安全。

總之

有很多方法可以在網絡上顯示圖像，大多數人不會三思而後行他們使用的格式。 但是，如果您確實花時間將格式與需要相匹配，您將獲得在所有屏幕上看起來都令人驚嘆的詳細而清晰的圖像。

在這篇文章中，我們提供了很多關於可縮放矢量圖形的信息。 您將使用 CSS 使圖像適應您的需要，並且操作範圍比 PNG 和 JPEG 大得多。 此外，它們重量輕——因此非常適合小屏幕和網絡連接不佳的情況。

您想在您的網站上使用可縮放矢量圖形嗎？如果是，這篇文章會對您有所幫助嗎？ 在下面的評論部分讓我們知道！

圖片來源：GDJ。