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 電子郵件中，這可用作一種技巧，為特定的郵件用戶端渲染內嵌裝飾。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.