什麼是 SVG 文件（以及如何使用它）？

已發表: 2020-08-18

可縮放矢量圖形 (SVG) 是一種獨特的圖像格式。 與其他品種不同，SVG 不依賴於獨特的像素來構成您看到的圖像。 相反，他們使用“矢量”數據。

通過使用 SVG，您可以獲得可以放大到任何分辨率的圖像，這在許多其他用例中對網頁設計非常有用。 在本文中，我們將問一個問題：什麼是 SVG 文件？ 然後我們將教您如何使用該格式。

讓我們開始吧！

訂閱我們的 YouTube 頻道

什麼是 SVG 文件？

SVG 是使用矢量構建的圖形。 對於初學者來說，向量是具有特定大小和方向的元素。 理論上，您可以使用矢量集合生成幾乎任何類型的圖形。 以這張帶有黑色邊框和陰影的藍色矩形圖像為例：

PNG 格式的藍色方塊。

這是另一種稱為便攜式網絡圖形 (PNG) 的圖像文件，用於插圖和繪圖。 如果您想使用矢量圖形複製類似的內容，則需要使用 XML 代碼生成它（與用於站點地圖的代碼相同。）以下代碼可以獲得相同的結果： 

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

理論上，如果您將這段代碼放入一個 HTML 文件中，您將看到一組與 PNG 相似的矩形——也就是說，只要您使用的瀏覽器支持 SVG 文件。 儘管兩個圖像看起來相同，但 SVG 文件提供了其他格式所沒有的一大堆好處。 例如，SVG 能夠在放大或縮小時保持圖像質量。

如果您繼續放大 PNG 矩形，您會注意到它的質量在某個時候開始下降。 對於更複雜的基於像素的圖形，退化會更快地變得明顯。 然而，SVG 在幾乎任何分辨率下看起來都不錯。

為什麼要使用 SVG 文件？

許多網站幾乎可以互換使用 PNG 和 JPEG 等格式。 不過，SVG 並不是那麼通用。 如果您嘗試使用矢量重新創建複雜的照片，通常最終會得到大量且無法使用的 SVG 文件。

不過，SVG 格式是一整套其他場景的絕佳選擇：

  • 標誌設計。 由於您可能會在網站和社交媒體上重複使用徽標，因此使用 SVG 可以解決任何潛在的可擴展性問題。
  • 圖表。 SVG 非常適合圖表和任何其他依賴於純線條的插圖。
  • 動畫元素。 您可以使用 CSS 為 SVG 設置動畫，這使它們成為網站設計中的有用組件，尤其是對於微交互。
  • 圖表和圖形。 您可以使用 SVG 創建支持動畫的可縮放圖形和圖表。

由於 SVG 使用 XML 格式，這也使它們既可搜索又可索引。 只要您使用正確的輔助功能標籤，屏幕閱讀器就可以解釋 SVG 文件。

最後，SVG 文件往往比其他格式的高分辨率文件小得多。 在紙面上，這意味著您可以縮小一些頁面大小並減少加載時間。 但是，除非您計劃將大部分圖像轉換為 SVG，否則性能提升可能很小。

如何創建 SVG 文件（2 種方式）

對於 SVG 文件，您可以採用兩種方法。 您可以從頭開始創建它們或獲取現有圖像並進行轉換。 讓我們從手動方法開始。

1.手動創建SVG文件

創建 SVG 文件通常不需要像我們之前所做的那樣輸入矢量信息。 那隻是展示概念的一個例子。 相反，您可以像創建任何其他圖形一樣創建 SVG - 通過使用設計程序並將文件另存為 SVG。 許多現代圖形設計工具都支持開箱即用的 SVG。 一些頂級選項包括：

  • Adobe Illustrator、Photoshop、Animate 和 InDesign
  • 微軟 Visio
  • 墨景
  • GIMP

此列表中的最後兩個選項是開源解決方案。 這使它們成為嘗試創建 SVG 的絕佳選擇，而無需支付高級軟件費用。 事實上，它們可能就是你所需要的。

如果您沒有任何圖形設計經驗，為您的網站創建自己的徽標或其他元素將是一個挑戰。 在這種情況下，最好的辦法是獲取現有圖像並將它們轉換為 SVG。

2. 將現有圖像轉換為 SVG

您可以使用許多免費工具將其他格式的圖像轉換為 SVG。 我們在上一節中提到的大多數軟件都可以讓您打開圖像並將它們保存為 SVG 文件。

如果您不想下載任何軟件，也可以使用在線轉換工具——您可以使用大量服務。 一個例子是 Vector Magic，你可以用它把各種文件類型轉換成 SVG：

Vector Magic 主頁。

我們喜歡這個特殊的工具，因為它會在您下載之前顯示您的 SVG 文件的預覽。 您還可以使用內置編輯器在下載文件之前進行小的更改和更正：

編輯 SVG 文件。

當然，這只是一種選擇。 其他 PNG 和 JPG 到 SVG 轉換器服務包括 Convertio 和 Img2Go。 您需要進行一些研究，以找到最適合您需求的解決方案。

根據我們的經驗，大多數 SVG 轉換器提供類似質量的結果。 為了獲得最佳效果，您使用的轉換器與您選擇的圖像無關。

根據經驗，僅將 SVG 格式用於“簡單”圖像——即具有明確邊界和清晰線條的圖像。 圖像越複雜，你就越有可能最終得到一個巨大的 SVG 文件，這是一項手動編輯或動畫製作的苦差事。

如何使用 SVG 文件（在 WordPress 內外）

SVG 並不是那麼難使用。 將 SVG 文件添加到您的網站就像獲取其代碼並將其粘貼到 HTML 文檔中一樣簡單，只要您希望圖像可以放置。

如果您和您網站的訪問者使用支持 SVG 文件的瀏覽器（現在大多數都支持），他們將能夠看到該元素。 當然，動畫 SVG 更棘手，因為它需要使用 CSS。

但是，如果您使用的是 WordPress，則該過程會發生變化。 內容管理系統 (CMS) 不支持開箱即用的 SVG。 如果您想啟用 SVG 支持以便將文件直接上傳到您的網站，您需要使用諸如 Safe SVG 之類的插件：

安全 SVG 插件。

也可以在 WordPress 中手動啟用 SVG 支持，但這個過程要復雜得多。 在這種情況下，使用插件是更安全的選擇。

結論

調整您的網站以使用 SVG 文件比您想像的要容易得多。 真正的挑戰在於從頭開始設計 SVG 或選擇正確的圖像以轉換為格式。 幸運的是，您可以使用很多工具來完成這兩項工作。

一些不錯的選擇包括 Adob​​e Illustrator、InDesign 和 GIMP。 使用這些工具，您可以創建現有圖像並將其轉換為 SVG。 如果您使用的是 WordPress，您可以使用 Safe SVG 插件上傳這些 SVG，然後享受動畫製作的樂趣。

您對如何使用 SVG 文件有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！

文章圖片縮略圖來自 VectorsMarket / shutterstock.com