SVG 背景圖案 CSS 產生器
立即將 SVG 檔案轉換為 Data URI，用於 CSS background-image。
透過移除不必要的標籤進行最佳化，有助於減少 HTTP 請求。
輸入 SVG 程式碼
將 SVG 檔案拖放至此
關於本工具
「SVG 背景圖案 CSS 產生器」是一個免費的開發者工具，可將 SVG 向量圖片檔案的程式碼轉換為可以直接透過 CSS background-image 屬性載入的格式 (Data URI)。
不同於一般將圖片檔案上傳至伺服器並使用 URL 參照的方法，將圖片資料直接嵌入到 CSS 檔案中可以減少額外的 HTTP 請求，有助於提升網頁載入速度 (PageSpeed)。
此工具會在轉換過程中自動移除不必要的註解與 Meta 標籤 (最佳化)，將嵌入造成的檔案膨脹降至最低。所有處理程序皆在您的瀏覽器內安全進行。
使用方法
輸入 SVG 程式碼
將您的 SVG 程式碼 (<svg>...</svg>) 直接貼入輸入欄位，或從您的電腦拖放 SVG 檔案。
確認並調整預覽
系統會自動產生預覽。請根據需要調整背景顏色、大小與重複設定。
複製 CSS 程式碼
從輸出區域複製包含 background-image: url("data:image/..."); 的 CSS 程式碼，並貼上至您的專案中使用。
名詞解釋
- Data URI
- 一種將圖片等檔案資料轉換為字串並直接寫入而非使用 URL 的方法。其格式為
data:image/svg+xml,...。 - URL 編碼
- 將 SVG 中的特殊字元 (<, >, # 等) 轉換為
%3C等格式。由於 SVG 是純文字，與 Base64 相比，此方法的檔案大小增加較少。 - Base64
- 一種根據特定規則將二進位資料轉換為字串 (A-Z, a-z, 0-9 等) 的格式。轉換後的大小約為原始大小的 1.33 倍 (增加 33%)。
- SVG 最佳化 (SVGO 等)
- 從 Illustrator 或 Figma 匯出的 SVG 通常包含不必要的標籤、換行符號以及特定於編輯器的註解。這是移除它們以減小檔案大小的過程。
常見問題
- Q.我的資料會被傳送到伺服器嗎？
- 不會。SVG 最佳化、編碼與轉換皆完全在您的瀏覽器中執行。檔案或資料絕對不會傳送至外部伺服器。
- Q.我應該選擇 URL 編碼還是 Base64？
- 通常建議使用「URL 編碼」。由於 SVG 是基於文字的，在伺服器使用 Gzip/Brotli 壓縮的環境中，與 Base64 相比 (強制增加約 33% 的檔案大小)，URL 編碼將導致較小的最終網路傳輸大小。
- Q.最佳化會改變 SVG 的外觀嗎？
- 不會。僅使用常規表達式安全地移除不影響視覺外觀的不必要資料 (註解、特定於編輯器的 Meta 標籤、
<title>標籤等)，因此渲染結果保持完全相同。 - Q.如果 SVG 包含外部圖片怎麼辦？
- 包含外部圖片內部參照 (例如透過 URL 連結的 PNG/JPG) 的 SVG 即使轉換為 Data URI 也可能無法正確顯示。此工具假設與完全由路徑或多邊形建構的向量資料搭配使用。
使用場景
建立背景圖案
非常適合重複 (平鋪) 無縫的 SVG 圖案，如點點、條紋或幾何形狀。無論解析度為何，它們都能清晰渲染。
提升效能
當使用小圖示或標誌作為背景圖片時，將它們嵌入到 CSS 中可減少載入獨立圖片檔案所需的 HTTP 請求，從而加快頁面載入時間。
響應式圖示
透過將 SVG 圖示嵌入為 CSS 中的清單項目符號 (例如使用 ::before 虛擬元素)，它們可以在任何裝置上清晰繪製。
HTML 電子郵件編碼
在經常封鎖外部圖片載入的 HTML 電子郵件中，這可用作一種技巧，為特定的郵件用戶端渲染內嵌裝飾。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.