什麼是SVG？它的優點和用途及如何應用到WordPress

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

通過使用SVG，您可以獲得可以放大到任何解析度的影象，這在許多其他用例中對網頁設計非常有用。在本教程中，我們將問一個問題：什麼是SVG 檔案？然後我們將教您如何使用該格式。

什麼是SVG檔案？

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

這是另一種稱為行動式網路圖形 (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在幾乎任何解析度下看起來都不錯。

假設您正在建設一個網站。您可能需要一些圖片。

你應該使用哪種檔案型別？

你的直覺可能是 JPEG 或 PNG。也許你會瘋狂地加入一些 GIF。

但是……有什麼區別呢？下面是幾種常見格式的比較：

JPEG（聯合影象專家組）

• 優點 檔案較小，非常適合複雜影象。
• 缺點：壓縮後質量下降，沒有透明度。

PNG（行動式網路圖形）

• 優點：無失真壓縮，支援透明度： 無失真壓縮，支援透明度。
• 缺點：檔案比 JPEG 大。

GIF（圖形交換格式）

• 優點：支援簡單動畫，檔案小： 支援簡單動畫，檔案小。
• 缺點：顏色有限，看起來有畫素感。

這些格式看似多種多樣。然而，它們都是光柵影象的例子。

光柵（或點陣圖）影象由精確放置的畫素繪製而成。它們有固定的尺寸、顏色和形狀。

這些檔案型別非常適合共享細節豐富的影象，如高質量照片。

缺點是無法更改或拉伸原始影象。你只能在上面塗畫或新增更多畫素。

SVG 為何如此有用

SVG（可縮放向量圖形）格式則不同。

向量檔案包含一組關於如何構建影象的文字說明。這些檔案是用 XML（可擴充套件標記語言）編寫的。

當你嘗試載入一個 SVG 檔案時，你的裝置會檢視這些說明，並按需構建圖片。

這種系統有幾個優點：

• SVG 可以縮放成任何大小，而且看起來依然完美。
• 它們還可以像程式碼檔案一樣進行編輯。
• 您甚至可以使用 CSS 為其設計樣式。
• 由於 SVGs 是由文字組成的，因此它們的檔案大小非常小。
• 這意味著它們在網路伺服器上佔用的儲存空間更少。
• 而且它們的載入速度比光柵圖形更快。

使用 SVGs 的另一個好處是提高了可訪問性。你可以根據使用者的需求在本地裝置上調整這些檔案，螢幕閱讀器也可以解讀它們。

SVGs 的缺點是，如果包含大量細節，它們會變得非常大。另外，您無法像優化光柵影象那樣優化它們。如果要分享攝影作品，最好使用 JPEG。

但對於大多數其他視覺內容來說，SVG 格式是一個不錯的選擇。

SVG 影象的常見用途

雖然 SVG 的用途非常廣泛，但它們在網頁設計中主要以以下形式出現：

• 圖示：從社交媒體連結到購物車按鈕，SVG 圖示在任何裝置上都顯得清晰明瞭。
• Logo：將您的品牌 Logo 儲存為 SVG，可以確保它在任何地方都能完美呈現–從小小的移動螢幕到巨大的廣告牌。
• 插畫：現在，許多網站都使用 SVG 插畫，而不是圖片庫中的圖片。即使圖形非常精細，它們也能完美縮放。
• 動畫：是的，SVG 可以移動！您可以將它們製作成動畫，為網站增添光彩，比如旋轉的徽標或跳舞的角色。
• 資訊圖表：由於 SVGs 可以縮放，因此您還可以用它來製作互動式資料視覺化圖。非常酷！

免費 SVG 資源

使用別人的設計是更簡單的選擇。幸運的是，網上有成千上萬的 SVG 可供下載。

許多SVG對於個人專案是免費的，但如果用於商業用途，則可能需要付費。

以下是我們最喜歡的一些資源：

• Font Awesome：廣受歡迎的 SVG 圖示包。
• Freepik：龐大的向量圖形、插畫和圖示資料庫。
• Lineicons：包含 8,400 多個簡潔的圖示。
• Free SVG：完全免費的 SVG 插畫庫。
• Open Doodles：免費的彩色人物插畫。
• IconScout：可搜尋超過 950 萬個資產庫，包括免費和付費圖示、插畫、Logo 等。
• DrawKit：多個免費和收費的 2D/3D 插畫包。
• unDraw：大量優秀的免費 SVG 插畫。

為什麼要使用SVG檔案？

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

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

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

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

最後，SVG檔案往往比其他格式的高解析度檔案小得多。在紙面上，這意味著您可以縮小一些頁面大小並減少載入時間。但是，除非您計劃將大部分影象轉換為 SVG，否則效能提升可能很小。

如何建立SVG檔案

對於SVG檔案，您可以採用兩種方法。您可以從頭開始建立它們或獲取現有影象並進行轉換。讓我們從手動方法開始。

1. 手動建立SVG檔案

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

• Adobe Illustrator、Photoshop、Animate和InDesign
• Microsoft Visio
• Inkscape
• GIMP
• Figma：非常適合協同設計工作。
• Sketch：Illustrator 的輕便替代品，深受介面設計師的歡迎。

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

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

下面以 Inkscape 為例，簡單介紹如何通過軟體建立 SVG：

Step 1. 設定畫布

如果你要重新開始，你需要為你的作品建立一個畫布。在 Inkscape 中，訪問 File > New，然後選擇新影象的尺寸。

如果你想編輯現有的 SVG 文件，請訪問 File > Open，啟動編輯器。

Step 2. 繪製你的設計

向量編輯中最重要的工具是 Bezier 工具。你可以從工作區左側的工具欄中選擇它。其圖示看起來就像一支正在繪製曲線的鋼筆。

使用該工具，只需點選幾下就能建立直線和完美曲線。

您建立的每個形狀都包含單獨的路徑和點，這些路徑和點都記錄在底層 XML 程式碼中。

一旦對結構感到滿意，就可以通過 Object Properties（物件屬性） 面板新增自己喜歡的顏色。

物件屬性選項將出現在右側選單中。

專業提示：想深入學習向量編輯嗎？Inkscape 的免費教程庫就在這裡。

Step 4. 另存為 SVG

對圖形滿意後，前往 File >Save As，選擇 SVG 作為格式。

給它取一個很酷的名字，然後點選儲存！

2. 將現有影象轉換為SVG

您可以使用許多免費工具將其他格式的影象轉換為SVG。我們在上一節中提到的大多數軟體都可以讓您開啟影象並將它們儲存為SVG檔案。

如果您不想下載任何軟體，也可以使用線上轉換工具——您可以使用大量 服務。一個例子是Vector Magic，您可以使用它來將各種檔案型別轉換為SVG：

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

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

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

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

如何使用SVG檔案

下面我們將對 SVG 的網站應用進行詳細的說明，包括如何新增 SVG 至網站，啟用 WordPress 網站 SVG 支援及對 SVG 檔案進行樣式化等。

如何在網站上新增 SVG

您已經完成了向量傑作。現在，全世界都應該看到它。

您可以在網站的 HTML 中嵌入 SVG。您所需要的只是一個指向檔案的<img>標記。它應該是這樣的

<img src=“my-awesome-svg.svg” alt=“My Awesome SVG”>

另外，您也可以使用 <svg> 標籤將 SVG 檔案中的 XML 程式碼直接插入網頁。

下面是一個例子：

<svg width=“200” height=“200”>
<circle cx=“50” cy=“50” r=“40” stroke=“red” stroke-width=“2” fill=“green” /> <p
</svg>

這段程式碼將生成一個漂亮的圓形按鈕，紅色輪廓，綠色內部。

在 WordPress 中啟用 SVG

SVG並不是那麼難使用。將SVG檔案新增到您的網站就像獲取其程式碼並將其貼上到HTML文件中一樣簡單，只要您希望影象可以放置。

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

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

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

使用 CSS 建立 SVG 風格

如果您使用 <svg> 標記嵌入 SVG 檔案，您可以使用 CSS 更改影象的外觀。

假如你建立了一個綠色圖形，但你希望它在網站上顯示為紅色。無需建立新的副本，只需編寫以下樣式即可：

svg {
stroke: red；
fill: blue；
}

stroke 屬性定義圖形輪廓的顏色。同時，填充屬性控制線條之間的顏色。

提示：還有更多屬性可以使用。

讓 SVG 影象具有響應性

SVG 檔案可以無限擴充套件，因此可以用於響應式設計。這隻需要一點 CSS 技巧。

下面是一個分步演示：

1. 使用 <svg> 標記嵌入圖片。這意味著你可以通過 CSS 進行修改。

2. 移除高度和寬度尺寸。這將迫使 SVG 適應其容器。確保保留 viewBox 部分。它應該是這樣的

<svg viewBox="0 0 20 20" xmlns="https://example.com/file.svg">
<!-- svg content here -->
</svg>

3. 設定 SVG 的最大尺寸。這樣可以防止影象溢位容器。例如

svg { display: inline-block； max-width: 100%； }

這樣就完成了！

專業建議：如果這一切聽起來有點技術性，不妨試試 .NET Framework。它是一款人工智慧建站工具，能為你處理網站的樣式設計。

SVG 高階技巧

我們已經介紹了建立和共享 SVG 的基礎知識。最後，讓我們來學習一些高階技巧。

1. 為 SVG 圖形制作動畫

你知道可以讓 SVG 跳舞嗎？是的，這種檔案型別可以製作動畫。

與原始影象一樣，您可以使用簡單的 XML 程式碼為圖形制作動畫。只需在形狀中新增一個 <animate> 元素 ，就能讓圖形動起來。

看起來應該是這樣的：

<svg width="100%" height="auto" xmlns="https://example.com/file.svg">
<circle cx="50" cy="50" r="50" style="fill:red;">
<animate
attributeName="cx"
begin="0s"
dur="5s"
from="30"
to="90%"
repeatCount="indefinite" />
</circle>
</svg>

您可以使用此技術為圖示新增一點動感，建立頁面載入指示器，甚至設計動畫廣告。

2. 使用 SVG Sprites 加快載入速度

SVG Sprites 就像是圖示的精選集。你可以將所有圖示捆綁到一個 SVG 檔案中，而不是擁有幾十個單獨的圖示檔案。

這意味著無論使用多少圖示，每個頁面都只需進行一次 HTTP 請求。這是縮短載入時間和節省頻寬的好方法。

如今，許多圖示包都以 Sprite 形式提供。你也可以自己製作。

要在網站上嵌入某個圖示，只需在 Sprite  檔案中精確定位儲存該圖示的區域即可。您可以使用基本的 CSS 程式碼來實現這一點：

#button {
width: 20px;
height: 20px;
background: url('sprite.svg') -128px 0;
}

建議：我們建議使用 CSS Sprites Generator 這樣的線上工具來計算正確的距離。

3. 優化 SVG 檔案，提高效能

雖然 SVG 檔案一開始很小，但您可以對其進行優化，使其更加輕便。

具體方法如下：

• 使用 SVGOMG 這樣的工具。是的，這是一個真實的東西。這是一個很棒的小網路應用程式，能讓你在不降低質量的情況下壓縮 SVG。
• 儘可能簡化路徑。複雜的圖形會變成大量的 XML 程式碼。許多向量圖形編輯器都有這方面的工具。(在 Inkscape 中，Path > Simplify）。
• 考慮懶載入首屏下方的 SVG。通過延遲載入頁面下方的圖片，可以減少多張圖片的影響。

4. 讓您的圖形易於訪問

由於 SVGs 是基於文字的檔案，因此螢幕閱讀器和其他輔助軟體很容易理解。

儘管如此，您仍然可以採取一些措施，使它們更易於訪問：

• 在 SVG 檔案中包含 <title> 和 <desc>。這些元素提供了對圖形的描述，對依賴螢幕閱讀器的使用者特別有幫助。
• 新增 role="img" 屬性。這將告知輔助技術，SVG 是一幅影象。
• 填寫 aria-labelledby 屬性。 該屬性應引用 <title> 和 <desc> 元素的 ID，將它們連結為圖片的標籤。
• 對於更復雜的 SVG，可提供 alt 文字。對圖片進行描述，這樣螢幕閱讀器就不需要進行解釋了。

讓 SVG 具有超級可訪問性的另一個好處是，你還可以優化它們的搜尋功能。

關於 SVG 的常見問題

如果您仍然對 SVGs 感到好奇，沒關係。我們還有更多知識要分享。以下是我們可能遺漏的一些問題的快速彙總：

如何將 SVG 轉換為 JPEG？

您可以使用桌面向量編輯器或 CloudConvert 等線上工具快速完成轉換。

能否直接在文字編輯器中編輯 SVG？

可以！SVG 基於 XML，因此您可以直接修改其程式碼。

SVG 比 PNG 清晰嗎？

大多數情況下是的。如果嘗試放大 PNG 檔案，這一點尤其明顯。

能否使用 JavaScript 編輯 SVG？

可以。這對於根據使用者輸入進行動態更改非常有用。

所有瀏覽器都支援 SVGs 嗎？

所有現代網路瀏覽器都支援 SVGs，包括 Chrome、Firefox、Safari 和 Edge。

小結

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

一些不錯的選擇包括Adobe Illustrator、InDesign和GIMP。使用這些工具，您可以建立現有影象並將其轉換為SVG。如果您使用的是WordPress，則可以使用Safe SVG外掛上傳這些SVG，然後享受動畫製作的樂趣。