SVG Sprite 建造器

SVG sprite 收集多個 SVG 圖標並將其合併成一個檔案，顯著減少在網頁上載多個圖標所需的 HTTP 請求數量。SVG Sprite Generator 將所有您的個別 SVG 檔案合併成一個高度優化的 sprite sheet，根據您偏好的佈局和尺寸選項。它會處理每個 SVG 檔案，應用 ID 前綴和元素清理等優化，並根據您的佈局選擇（水平、垂直或對角線）進行佈局。這有助於通過最小化服務器請求來提升網頁效能，同時保持向量圖形提供的可擴展性和質量優勢。此外，生成器還會創建 CSS 或 SCSS 檔案，以輕鬆實現網頁專案中的應用。

SVG Sprite Generator 提供三種不同的佈局選項，以適應設計和開發的不同需求。水平佈局將所有圖標從左到右排列在一行中，適合簡單的線性佈局和水平導航元素。垂直佈局將圖標從上到下堆疊在一列中，適合側邊欄菜單或垂直圖標列表。對角線佈局將圖標對角線排列，可能適用於特殊設計佈局或當您想進行創意視覺佈局時。所有佈局選項都保持圖標之間的一致間距和對齊，無論您選擇的配置如何，都能提供專業的外觀。這些佈局選項為開發者提供了一定程度的自由度，以決定如何將 sprite 整合到他們的專案中。

當然可以！SVG Sprite Generator 允許多種客製化選項來適應非常特定的設計需求。您可以從 16x16、24x24、32x32、48x48、50x50 和 64x64 像素的預設值中選擇，以涵蓋大多數常見的網頁開發圖標尺寸。然後，通過自訂尺寸控制，您可以設定 10 到 500 像素之間的精確寬度和高度值。這意味著設計系統可以標準化 sprite 中圖標的尺寸，或保持原始比例，以為 UI 提供新內容。這種尺寸客製化非常靈活，因為它適用於所有佈局選項，無論您選擇哪種方法，都能確保 sprite 內的圖標具有一致的尺寸，從而消除 CSS 和 HTML 程式碼實現中的潛在差異。

SVG Sprite Generator 支援多種輸出格式，適用於不同的開發工作流程和用途。首先輸出的是 Sprite SVG，其中包含所有合併的圖標，並嵌入單個優化的向量檔案中。其他輸出可以是包含所有必要類別和定位信息的 CSS 或 SCSS 檔案，以有效地在網上使用 sprite。HTML Demo 輸出為您提供一個即時可工作的示例檔案，說明如何在網頁上實現您的 sprite。對於最現代的流程，該工具提供包含 sprite 元數據的 JSON Manifest 檔案和 React Components 輸出，為每個圖標建立即用型 React 組件。這些多樣化的輸出類型極大地方便了將生成的 sprite 注入各種專案中，從純粹佈局到更現代的基於組件的應用。

SVG Sprite Generator 通過多種技術優化效能，最大化檔案壓縮並加速網頁載入時間。首先，它將多個 SVG 檔案合併為一個 HTTP 請求，顯著減少載入多個圖標所需的服務器連接數量。該工具還提供多種先進優化選項：添加 ID 前綴以避免不同 SVG 檔案之間的衝突，清理 <defs> 區域以移除無用和重複的定義，以及移除對最終視覺效果沒有貢獻的隱藏元素。這種方式也優化了 sprite 的壓縮，同時在視覺層面保持同等優質。此外，由於 sprite 是在瀏覽器中本地生成的，因此沒有因網絡延遲而產生的延遲。因此，這些 sprite 檔案比個別圖標載入更快，提升頁面效能和用戶體驗，特別是在網絡鏈路較慢的移動設備上。