什麼是 SVG 文件？ 5 件事要知道

已發表: 2021-11-17

什麼是 SVG 文件？ 當您在設計一個盡可能用戶友好的 WordPress 網站時，您可能會遇到一些圖像問題； 特別是因為它與圖像分辨率有關。 獲得正確的圖像質量很重要，因為在網頁上看起來比扭曲和縮放不良的照片或徽標更業餘的東西更少。

響應式設計要求只會進一步加劇我們在圖像和可擴展性方面的問題。 網站用戶正在各種不同的設備上查看您的內容。 正因為如此，您的圖像必須針對每台設備進行全面優化。

在本文中，我們將了解如何擁有一種文件格式，無論 SVG 文件的大小如何，都可以輕鬆獲得完美無瑕的圖像。

好消息是有人已經這樣做了。 這就是“什麼是 SVG 文件？”這個問題的答案。 SVG 文件是 WordPress 網站上所有非攝影圖像的完美解決方案。

SVG 文件將生成任何比例的完美清晰的圖形，並針對所有搜索引擎進行了全面優化。

他們也是：

  • 文件大小比其他圖像文件格式小
  • 可編程的
  • 能夠製作動態動畫

關於 SVG 文件，還有比你想像的更多的東西要解壓。

什麼是 SVG 文件

什麼是 SVG 文件？

SVG 代表可縮放矢量圖形文件。 它是一種用於在網絡上呈現二維圖像的文件類型。

與圖像的其他標准文件格式不同，SVG 以矢量格式存儲圖像，該格式由基於數學公式的線、點、形狀和曲線組成。

但究竟什麼是矢量圖形？

矢量與光柵

您在當今 Internet 上看到的圖像可分為兩個不同的類別：矢量圖形和光柵圖形。 毫無疑問，您已經熟悉 JPEG 和 PNG 圖像文件。 這些都是作為光柵圖形格式創建的。

光柵格式是指將圖像信息存儲在稱為位圖的網格中的圖像文件。 位圖中的各個方塊組合起來向我們展示了可識別的圖像，就像電視或計算機屏幕上的像素一樣。

光柵圖形最適合非常詳細的照片圖像，其中每個像素的確切顏色必須唯一指定。 這些圖像類型具有固定的分辨率，這意味著當您增加圖像大小時，圖像質量會降低。

PDF 和 SVG 是矢量圖形格式，它們的工作方式完全不同。 它們將圖像存儲為單個點和這些點之間的線。 數學公式用於確定線和點的形狀和位置，同時在圖像按比例縮小或放大時保持空間關係。

矢量圖形能夠存儲顏色信息並可以顯示文本。

SVG 文件如何工作？

SVG 文件總是用稱為 XML 的代碼編寫的。 這是一種通用標記語言，用於傳輸和存儲數字信息。 SVG 文件中的 XML 代碼指定了幾個重要的內容，包括：

  • 顏色
  • 形狀
  • 圖像中的文本

當 Web 瀏覽器（或任何其他應用程序）處理 SVG 文件時，它會接收 XML 信息，對其進行處理，然後將其作為矢量圖像顯示在用戶的屏幕上。

使用 SVG 文件有什麼好處？

SVG 文件不僅實用而且非常強大，可用於 WordPress 網頁設計。 原因如下：

SVG 文件具有無限的可擴展性

SVG 文件可以調整為您想要的任何大小而不會丟失圖像質量。 SVG 文件的大小無關緊要，因為無論它們在您的網站上顯示的大小，它們看起來都是一樣的。

這種可擴展性很重要。 畢竟，每次查看的圖像大小都會有所不同，這取決於他們使用的設備、瀏覽器窗口的大小以及您的整體網站佈局。

無論如何，您的 WordPress 網站圖像必須完全呈現給您的所有用戶。 為您的圖像使用 SVG 文件可以更輕鬆地完成此操作。

當您需要擴展或縮小 SVG 文件的大小時，正在讀取它的程序將重新調整線條和點，以便純色和清晰的邊界準確地保持在應有的位置。

相比之下，當光柵圖像文件在用戶屏幕上放大到更大尺寸時，它們看起來會像素化。 最終，光柵圖像根本不是為有效縮放而設計的。

但是，需要權衡更好的可擴展性。 按照設計，SVG 文件缺乏光柵圖像提供的更高質量和細節。 您只能在矢量系統中傳達有限數量的視覺信息，而以光柵格式構建的文件將在位圖允許的範圍內盡可能詳細地顯示其圖像。

請記住，將保存為 PNG 格式的詳細照片轉換為矢量的嘗試將導致巨大且無法使用的 SVG 文件。

這意味著這兩種圖像文件類型在 WordPress 網頁設計中都有獨特的位置。 對照片使用 JPEG 和 PNG（或其他光柵格式），對細節較少的圖像使用 SVG 文件。

設計定制

SVG 文件允許 WordPress 開發人員和設計人員更好地控制其網站的顯示方式。 無需直接在文本編輯器中修改文件，只需使用與 SVG 兼容的眾多編輯程序之一進行更改：

  • 顏色
  • 文本
  • 矢量形狀
  • 視覺效果
  • 陰影和漸變

腳本兼容性

由萬維網聯盟開發，作為 Internet 圖形的標準格式，SVG 文件旨在與其他 Web 約定進行良好的通信，例如：

  • CSS
  • HTML
  • JavaScript

由於這種設計兼容性，以 SVG 文件格式保存的圖像可以使用腳本進行控制。 這為動態顯示打開了大門，包括移動響應圖像、動態圖表和動畫。

使用 PNG 或 JPEG 圖像無法做到這一點。

可訪問性和搜索引擎優化

SVG 文件是文本時間。 與 PNG、JPEG 和其他光柵圖像格式相比，這為您提供了一些明顯的優勢。

首先，程序員能夠查看 XML 代碼並立即理解它。 但除此之外，當 SVG 文件包含文本時，文本信息將存儲為文字文本（而不是形狀）。 因此，屏幕閱讀器可以解釋 SVG 文件，這有助於無法以傳統方式與數字內容交互的人。

但更重要的是，SVG 文件可以很容易地被 Go​​ogle 和其他搜索引擎索引。 通過在網頁上放置包含大量文本（或其他 SVG 顯示）的信息圖，在圖像中包含關鍵字將提高您的頁面排名並推動您的 SEO。

在 SEO 可擴展性方面，JPEG 和 PNG 圖像文件僅限於替代文本和元數據。

更易於管理的文件大小

SVG 能夠比光柵格式更有效地存儲您的圖像，前提是您使用的圖像沒有過多的細節。

它們包含足夠的信息來以任何比例顯示矢量，而位圖圖像文件需要更大的文件大小來處理按比例放大的圖像。

SVG 文件的小物理尺寸非常適合 WordPress 網站所有者，因為小圖像文件在 Web 瀏覽器上的加載速度會更快。 當您使用比 JPEG 和 PNG 更多的 SVG 文件時，您將有助於提高網站的整體性能。

請記住，您不應將網站的所有圖像都轉換為 SVG 文件。 高度詳細的照片應保留為 JPEG 或 PNG 格式。

您應該使用 SVG 文件做什麼？

這些文件類型最適用於細節少於標準照片的圖像。 讓我們看看 SVG 圖像文件最常見的在線用途。

圖標

幾乎所有圖標都可以很好地轉換為矢量圖像，因為它們具有明確定義的邊界，並且相對簡單。

按鈕等元素的圖標也需要對各種屏幕的尺寸做出響應，這意味著它們需要可擴展。

網站標誌

SVG 非常適合出現在您的網站標題、電子郵件和印刷品中的徽標。 徽標的設計通常非常簡單，這使得它們非常適合 SVG 格式。

插圖

非照片視覺藝術和矢量是天作之合。

當您將它們轉換為 SVG 時，您網站上的這些類型的繪圖將很容易縮放，同時節省文件空間。

界面元素和動畫

當您利用 JavaScript 和 CSS 的功能時，您將能夠設置 SVG 文件以動態更改外觀。 它們可以在您選擇的觸發事件後自動觸發或設置為更改。

動畫 SVG 為您的網站添加了急需的視覺風格，或者可用於通過界面動畫吸引用戶。

數據可視化和信息圖表

您的 WordPress 網站會受益於插圖圖表或信息圖表等元素嗎？ 也許您需要創建更好的 WordPress 特色圖片以使您的網站更具影響力。

這是另一個非常適合 SVG 的應用程序。 設計將無縫擴展，每個 SVG 文件中的文本都是 100% 可索引的。

如何創建和編輯 SVG 文件

要打開任何 SVG 文件而不進行編輯，您只需直接在 Web 瀏覽器中打開它，因為每個瀏覽器都旨在完美地顯示 SVG。 您還可以在編輯程序中預覽 SVG 文件，我們稍後會介紹。

當您想修改 SVG 文件時，您可以在文本編輯器中進行。 但是，這對於進行顏色以外的更改是不切實際的。 相反，您應該使用專門的軟件進行此編輯。

有高級和免費選項，包括：

  • Adobe 插畫家
  • CorelDRAW
  • 微軟視覺
  • GIMP (GNU Image Manipulation Program) – 這是流行的、免費的、完全開源的
  • 谷歌文檔

要開始創建 SVG，您無需成為 XML 或編碼方面的專家。 您需要做的就是在任何這些程序中繪製矢量，然後以 SVG 文件格式導出它們。

列出的每個程序都有自己的學習曲線和限制。 如果您計劃進一步探索 SVG 文件，請嘗試上述幾個選項。 在您決定創建矢量的任何付費或免費選項之前，請先了解可用的工具。

這是如何使用 Adob​​e Illustrator 對圖像進行矢量化的一個示例：

  1. 在 Adob​​e Illustrator 中創建您計劃轉換為 SVG 文件的獨特設計。
  2. 在您的設計上單擊“圖像跟踪”以選擇它。 在下拉菜單中，轉到高級選項。 選擇“大綱視圖”以清楚地了解設計的邊界並查看存在多少節點。
  3. 單擊“擴展”將設計更改為矢量。
  4. 根據需要調整大小。
  5. 刪除不需要的節點以微調設計。
  6. 在“魔術棒”工具中，單擊“組選擇”，然後將完成的設計與當前在畫板上的任何其他設計分開。
  7. 選擇您的設計後，單擊文件 > 導出 > 導出為 SVG (*.SVG)。
  8. 在 SVG 選項中，單擊“顯示代碼”以顯示 XML。 複製並粘貼到您喜歡的位置。

SVG 文件非常適合按比例設計

什麼是 SVG 文件？ 這是一個圖像文件，在許多不同的 WordPress 網頁設計場景中都非常方便。 無論您是需要放大您的徽標以貼在廣告牌上還是將其縮小到縮略圖大小，SVG 文件都將確保您不會丟失使您的徽標獨一無二的細節。

包起來

SVG 文件是交互式的、多功能的，並且很容易使用您選擇的圖形編輯器和一點設計技巧開始創建。

使用 WordPress 網頁設計工具包中的 SVG 文件，您將永遠無需擔心標準網站圖像中那些惱人的模糊圖形。

當然，對於您的高度詳細的照片，最好堅持使用 JPEG 和 PNG。

獲得獎勵內容：建立業務所需的工具
點擊這裡