如何建立可縮放的 SVG 圖像以用於網頁

如果你從事網頁圖像處理工作，遲早都需要建立可縮放的 SVG 圖像。 它需要在任何螢幕上都完美呈現，載入速度快，並且不會對網站效能產生負面影響。普通的 PNG 或 JPG 圖片在許多情況下都能正常工作，但當你的 logo 在 4K 電視上看起來模糊不清，或者圖標在新行動裝置上失去清晰度時，你就會意識到你真正需要的是向量圖形。

SVG（可縮放向量圖形）已成為標誌、圖示、插圖、資訊圖表和輕量級動畫的主要格式。這些是瀏覽器即時解析和渲染的 XML 文本，因此可以無損縮放，並可使用 CSS 或 JavaScript 進行修改，還能針對 SEO 和可訪問性進行最佳化。接下來，我們將清晰簡潔地介紹這種格式的工作原理，如何從零開始創建或從 JPG/PNG 圖片創建，如何將它們整合到您的網站中，以及如何充分利用它們。

什麼是 SVG 檔？為什麼它可以縮放？

SVG 代表可縮放向量圖形，指的是可以縮放而不損失清晰度的向量圖形。與 JPG 或 PNG 不同，後者儲存的是每個像素的信息，而 SVG 則以 XML 代碼的形式儲存繪製指令——線條、曲線、顏色和位置。瀏覽器讀取這些指令，並以裝置所需的解析度「重繪」影像。

這種運作方式確保同一個 SVG 檔案在手機、4K 顯示器或廣告看板上看起來同樣清晰。這裡不存在需要拉伸或插值的像素；調整的是定義形狀的數學原理。此外，由於它是文字文件，因此可以使用任何程式碼編輯器開啟和編輯，並可進行自動化處理、壓縮，甚至使用 JavaScript 進行操作。

SVG 格式與解析度無關，對於簡單的圖形來說非常輕巧，並且與所有現代瀏覽器相容。Chrome、Firefox、Safari、Edge 和 Opera 瀏覽器多年來一直原生支援 SVG 格式。即使是 Internet Explorer 9 及更高版本也支援 SVG，儘管在一些進階功能方面有限制。

然而，SVG 並不是所有類型影像的萬用藥。在處理包含數百萬種顏色和大量細節的複雜照片時，壓縮良好的 JPG 格式通常更有效率。嘗試將整張照片向量化通常會產生一個巨大的 SVG 文件，難以優化且不適用於實際應用。

柵格圖與向量圖：SVG、JPG 和 PNG 之間的區別

要了解何時適合建立可縮放的 SVG 圖像，您需要清楚柵格圖像和向量圖像之間的差異。JPG、PNG 和 GIF 都是點陣圖格式：它們儲存的是具有固定顏色的像素網格。 SVG、EPS、AI 或 PDF （在它們的向量部分）描述數學形式。

在柵格影像中，如果尺寸增加過多，像素就會變得可見，並出現典型的「階梯狀」效果。當你試圖強行將影像解析度提升到原始影像所不具備的程度時，影像品質的損失是不可避免的。相較之下，SVG 影像可以隨意放大，因為放大的是繪製每條線的公式。

JPG格式非常適合照片，因為它能很好地壓縮色彩變化，但代價是會損失一些畫質。另一方面，PNG 格式保持了影像品質（無損壓縮），並支援透明度，因此非常適合用於具有透明背景的圖形、螢幕截圖或不需要過度縮放的介面元素。

SVG 在圖標、標誌、插圖、圖表、資訊圖表和簡單動畫方面表現出色。對於這類內容，PNG 檔案往往體積較大，放大後效果較差，無法像 SVG 那樣靈活地使用 CSS 進行編輯。因此，Web 生態系統已全面採用 SVG 作為所有現代介面元素的格式。

可縮放SVG影像的常見用途

在網頁設計和開發中，SVG 主要用於需要在任何裝置上保持最大清晰度的元素。一個網站使用數十個或數百個 SVG 圖形分佈在選單、部分、按鈕、標題或插圖中的情況並不少見。

圖標是 SVG 佔據主導地位的最明顯例子之一。社群媒體圖示、漢堡菜單、星級評分、購物車圖示…它們都受益於這種格式的可擴展性。您可以在行動選單上使用很小的圖標，在價格頁面上使用很大的圖標，而不會丟失任何細節。

企業標誌是另一個重要的用途。將您的商標儲存為 SVG 格式，可確保其在網站圖示、選單、首頁輪播圖和任何印刷品上都能完美呈現。此外，單一來源檔案可重複用於網頁、簡報、海報和名片，無需每次都重新建立。

SVG 也常用於資訊圖表、資料圖表和自訂插圖。由於內容是基於向量的，因此圖形線條看起來很清晰，文字可以保持清晰，並且可以無縫適應平板電腦、手機和大螢幕。

最後，SVG 可讓您創建非常輕量級且流暢的動畫。你可以使用 CSS、SMIL 或 JavaScript 為圖示添加動畫效果，使其在滑鼠懸停時改變顏色；為載入動畫添加無限旋轉的載入動畫；甚至可以為圖形添加對滾動或用戶互動做出反應的動畫效果。

用於建立可縮放 SVG 影像的工具

要產生 SVG 文件，您可以從向量編輯器中從頭開始，也可以轉換現有的柵格或向量格式圖像。選擇取決於您是想要一個全新的設計，還是已經有一個 JPG/PNG 格式的標誌想要向量化。

最常用的SVG設計和匯出軟體包括Adobe Illustrator、Inkscape、CorelDRAW、Figma和Sketch。它們都以向量圖為基礎，並允許您以 SVG 格式儲存，同時對尺寸、字體和匯出類型進行不同程度的控制。如果您需要更多選擇，請參閱向量圖像建立程式清單。

Adobe Illustrator是許多機構和工作室的專業標準。它允許您使用鋼筆工具繪製圖形，按圖層組織設計，使用高級效果、高品質排版，然後匯出為 SVG，並調整嵌入或連結字體、內部或外部 CSS 樣式以及相容等級等選項。

Inkscape 是一款免費開源的替代方案，幾乎涵蓋了一般設計師所需的一切。它擁有用於處理形狀、節點、文字、漸層、濾鏡的工具，也可以直接匯出為 SVG 格式，而且通常也支援這種格式。 產生程式碼 很乾淨。

Figma 和 Sketch 在介面設計領域非常流行，它們也允許將圖示和元件匯出為 SVG 格式。如果您已經在使用這些工具開發使用者介面，那麼它們就非常完美，因為您可以將圖示直接添加到程式碼中，而無需中間步驟。

將 JPG 或 PNG 影像轉換為 SVG 格式

通常情況下，你不需要從零開始，而是已經有了 JPG、PNG 或 PDF 格式的標誌或圖形，並且需要一個可縮放的 SVG 檔案。在這種情況下，有兩種方法：使用路徑工具自動向量化，或使用鋼筆工具手動重新繪製圖形。

自動描摹工具可以快速將像素轉換為向量形狀，但結果並不穩定。對於簡單的單色或細節較少的徽標，它們效果很好，而且能節省時間。但對於複雜的圖形，它們會產生數千個節點，以及一個非常大且難以編輯的 SVG 檔案。如果您需要深入了解手動方法，請學習 Illustrator 中的描摹和向量化技術。

一些專業平台提供手動向量化服務透過這些服務，您可以上傳 JPG、PNG 或 PDF 格式的徽標，設計師會使用 Illustrator 軟體，採用正確的字體手工重新繪製，最終交付可用於印刷或網頁的清晰 EPS/AI/SVG 檔案。對於需要完美呈現的品牌標誌而言，這是最可靠的選擇。

如果您從其他向量格式（例如 EPS 或 AI）轉換，SVG 轉換器通常會保留幾乎所有資訊。在這種情況下，只要你不使用特定程式中非常具體的特效，顏色、形狀和圖層結構就能得到相當忠實的保留。

當來源影像是照片或非常複雜的柵格影像時，自動向量化很少能提供有用的結果。在這種情況下，最合理的做法是將照片保留為 JPG 或 WebP 格式，並將 SVG 保留用於圖示、邊框、文字或疊加的圖形元素。

如何一步一步建立 SVG 文件

如果你想從頭開始設計自己的可縮放 SVG 圖像，那麼幾乎所有向量編輯器的基本工作流程都非常相似。以下是一個總體概述，您可以將其應用到 Inkscape、Illustrator 或類似工具中。

第一步是創建尺寸合理的畫布或工作區。雖然 SVG 以後可以縮放，但建議使用「人體尺寸」（例如，圖示為 500×500 像素，標題為 1200×600 像素），因為這樣可以使設計更舒適，並有助於保持比例。

接下來是繪圖階段使用鋼筆工具或貝塞爾工具繪製輪廓、直線和曲線，並使用基本形狀工具（矩形、橢圓、多邊形）建立設計。每個形狀都會以路徑或路徑集的形式記錄在 SVG XML 檔案中。

在這些路徑上，您可以套用填滿和描邊顏色、線條粗細、圓角、漸層或圖案。所有這些屬性都可以轉換為 CSS，因此建議不要過度使用那些在瀏覽器中無法很好地轉換的奇怪效果。

設計完成後，調整畫板以適應內容。大多數程式都有一個選項，可以將畫布調整到繪圖的邊界，避免空白邊距；這有助於確保 SVG 周圍沒有不必要的空白。

最後，匯出或另存為 SVG 格式。匯出對話方塊通常包含簡化路徑、將樣式作為內聯屬性或 CSS 包含、嵌入圖片或字體等選項。對於 Web 應用，通常希望匯出盡可能簡潔輕巧、不包含多餘元資料的 SVG 檔案。

調整 SVG 的大小和縮放比例而不損失質量

這種格式的優點在於，您可以調整 SVG 的大小而不會使其出現像素化，但這並不意味著您不應該注意它的縮放方式。此過程中的關鍵屬性是 視圖框它定義了圖的內部座標系。

在 SVG 檔案本身中，您會看到類似 viewBox="0 0 100 100" 的內容。這表示整個圖形是在一個 100x100 單位的正方形區域內設計的。如果您隨後在 HTML 中告訴瀏覽器 SVG 的寬度應為 200 像素，瀏覽器只需將這些單位相乘即可適應內容。

為了讓 SVG 真正具有響應式，通常的做法是從元素中移除寬度和高度屬性。 只保留 viewBox。然後，在 CSS 中，它的行為可以透過以下簡單的程式碼來控制：

svg { display: inline-block; max-width: 100%; height: self; }

如果您需要大量調整許多 SVG 的大小，並且不想修改程式碼，可以使用一些線上工具來調整 SVG 的大小。這些實用程式可讓您以百分比或單位定義新尺寸，套用轉換，並下載新的縮放版本，而無需安裝任何軟體。

如何將SVG插入網頁

一旦你有了可縮放的 SVG 圖像，下一步就是將其匯入瀏覽器。有幾種方法可以實現這一點，每種方法都能讓你對樣式、可訪問性和效能進行不同程度的控制。

最基本、最直接的方法是使用標籤指向外部 SVG 文件。 例如：這與 JPG 的機制相同，只是瀏覽器知道該資源是基於向量的。

如果您想要更精細的控制，可以使用標籤將 SVG 程式碼嵌入到 HTML 中。在這種情況下，你需要複製文件內容並將其貼到頁面程式碼中。這樣，你就可以使用 CSS 更改顏色、添加類別、使用 JavaScript 操作特定部分，以及提高網站的易用性。

另一種選擇，雖然現在較少使用，但仍然有效，就是使用任何一個將 SVG 作為嵌入式外部資源加載它在風格和易用性方面存在一些局限性，因此實際上幾乎每個人都更喜歡…或內聯 SVG。

出於安全考慮，WordPress 等內容管理系統預設不允許上傳 SVG 檔案。安裝 Safe SVG 或 SVG Support 等插件即可輕鬆啟用它們，這些插件會對檔案進行清理，防止其包含惡意腳本，並允許您像使用任何其他圖像一樣從媒體庫中使用它們。

使用 CSS 和程式碼為 SVG 設定樣式和新增動畫效果

可縮放 SVG 映像最強大的優勢之一是，它可以被視為頁面 DOM 本身的一部分。這意味著我們可以使用 CSS 應用程式樣式，並使用 CSS、SMIL 或 JavaScript 建立動畫，而無需修改基礎檔案。

如果你將 SVG 內嵌嵌入（而不是像這樣） （外部）您可以使用 CSS 直接變更填滿顏色和描邊。例如：svg 路徑 { fill: red; stroke: blue; }。這樣就可以重複使用同一個文件，在頁首中用一種顏色顯示徽標，在頁腳中用另一種顏色顯示徽標。

填滿屬性定義形狀內部區域的顏色，描邊控制輪廓的顏色和粗細。您也可以修改 stroke-width、stroke-dasharray 或 stroke-linecap 等屬性，以達到手繪效果或虛線效果。

對於簡單的動畫，CSS 就足夠了。使用標準變換和過渡效果，您可以讓圖示在滑鼠懸停時改變顏色，旋轉、脈衝或滾動。

如果您需要更複雜的功能，SVG 標準本身就包含以下元素：允許對屬性進行動畫處理 El Temppo例如，使圓在循環中左右移動，每次移動位置 cx 五秒鐘，而無需外部腳本。

對於複雜且互動的動畫，JavaScript（或特定函式庫）可讓您將 SVG 與使用者事件連接起來。你可以透過點擊移動圖表的各個部分，將動畫與滾動同步，或者根據頁面接收的數據更改外觀，從而實現非常豐富的數據視覺化。

SVG精靈和效能優化

當一個網站使用數十個或幾百個圖示時，單獨載入每個 SVG 會涉及許多 HTTP 請求。為了減少元素數量並加快載入速度，使用 SVG 精靈或類似的分組策略非常有用。

SVG 精靈圖本質上是一個包含許多圖示的大型文件，這些圖示定義在元素內。然後，在 HTML 中每個需要顯示圖示的部分，使用這樣，瀏覽器只需下載一次精靈圖，即可在內部重複使用這些圖示。

這項技術可以顯著減少對伺服器的請求數量。這可以降低延遲，改善用戶體驗，尤其是在行動網路連線下。此外，您仍然可以使用 CSS 變更顏色和大小。

除了精靈圖之外，還有專門用於壓縮和優化 SVG 的工具。SVGO 或其網頁版 SVGOMG 等工具會分析程式碼，刪除元資料、空格、不必要的屬性、路徑中的冗餘點以及所有不影響視覺效果的內容。

許多向量編輯器還包含內建的路徑簡化功能。減少複雜曲線中的節點數量不僅可以減少檔案大小，還可以方便後續編輯，並防止瀏覽器計算過於複雜的路徑。

對於首屏下方有很多圖片的頁面，最好將 SVG 與延遲加載技術結合起來使用。雖然 SVG 通常很輕量級，但一次性加載所有圖標和圖形是沒有意義的，因為用戶要滾動幾百像素才能看到它們。

SVG 的兼容性、SEO 和可訪問性

就相容性而言，目前的情況非常方便：所有現代瀏覽器都廣泛支援 SVG。Chrome、Firefox、Safari、Edge 和 Opera 瀏覽器在桌面和行動裝置上都能無縫顯示 SVG 圖形，而且在大多數專案中，真正老舊瀏覽器的普及率已經非常低了。

SVG 與 JPG 或 PNG 的真正區別在於，它的內容是文本，因此可以被搜尋引擎和輔助技術讀取。如果使用合適的標籤和屬性，這使其成為 SEO 和可訪問性的有趣盟友。

在元素內部您可以包含並使用 <desc> 來描述圖表這些節點可用作螢幕閱讀器可存取的信息，並為檔案內容提供語義上下文，從而方便索引。

屬性 role="img" 告訴輔助技術，SVG 充當影像。，而 aria-labelledby 可以將 SVG 連結到內容。以及 <desc>。在複雜情況下，仍然建議在 HTML 中為圖像添加替代文本，或者如果將其作為外部資源插入，則在 <img> 中使用 alt。

從搜尋效能的角度來看，使用最佳化的 SVG 可以減少頁面的整體大小。更少的千位元組意味著更短的載入時間，這對 LCP 或 FCP 等指標有正面的影響。 Google 它已納入核心網路指標的考慮範圍。

對於仍有用戶使用非常老舊瀏覽器的項目，可以實施備用方案。例如，提供等效的 PNG 圖片或特定的條件語句。然而，在實踐中，這些修復措施的需求越來越少。

設計和管理 SVG 檔案的最佳實踐

創建可縮放的 SVG 圖像不僅僅是“導出為 SVG”，它還涉及一定的設計和編碼規範。如果注意圖層的命名、簡化路徑和檔案結構，維護起來會更容易，生產效率也會更高。

建議保持 SVG 程式碼整潔，使用一致的縮排和有意義的 ID 和類別名稱。例如，當需要透過 CSS 應用特定樣式或使用 JavaScript 修改元素時，使用 id="cart-icon" 比 id="path123" 更有用。

減少隱藏元素、冗餘層和重複屬性是另一個關鍵。許多直接從設計程式產生的檔案包含在網路上無用的信息，這些資訊可以透過 SVGO 或類似工具安全地清理掉。

在一個專案中處理大量 SVG 檔案時，最好將它們組織到邏輯資料夾中，並使用一致的檔案名稱。擁有 /svg/icons/、/svg/logos/ 和 /svg/illustrations/ 目錄可以節省您尋找資源的時間，並有助於自動化最佳化流程。

從視覺效果上來說，請記住 SVG 在傳統螢幕和高密度視網膜顯示器上都應該看起來不錯。使用清晰的形狀、適當的對比度和不太小的文字對於確保在各種裝置上的可讀性至關重要。

如果要在 SVG 中使用字體，請考慮是將文字轉換為輪廓還是保留為動態文字。將其轉換為曲線可以確保即使用戶沒有安裝該字體，它看起來也一樣，但會失去可訪問性和編輯能力；將其保留為文字可以保護語義，但代價是依賴可用的字體。

一個結構良好的 SVG 檔案輕巧、易讀、易於訪問，並且易於在不同的上下文中重複使用。透過結合良好的設計實踐、優化工具以及與 HTML 和 CSS 的正確集成，您可以充分利用這種格式來處理圖標、徽標、圖形和動畫，從而提高網站的視覺品質、性能以及適應任何螢幕的能力。