SVG Forge

SVG 轉 CSS background-image

把任何 SVG 以編碼後的 data URI 內嵌進你的樣式表。

或把檔案拖進來 / 在下方貼上程式碼
CSS 規則
輸出會顯示在這裡

使用方式

  1. 1貼上 SVG 程式碼，或拖入一個 .svg 檔案。
  2. 2工具會把它 URL 編碼成一條 background-image 規則。
  3. 3把這段 CSS 直接複製進你的樣式表。

免費、不必註冊、沒有浮水印——一切都在你的瀏覽器本機執行，檔案絕不會離開你的電腦。

常見問題

為什麼用 URL 編碼而不是 base64？

URL 編碼的 SVG 更小，而且在 CSS 裡仍然可讀；如果你偏好 base64，也可以切換。

什麼時候適合把 SVG 內嵌進 CSS？

小的裝飾性圖示與紋理——能省一次 HTTP 請求。大幅圖形還是做成檔案更合適。

相關工具

SVG 轉 Data URI

把 SVG 編碼後用在 img src、CSS url() 或任何能放 URI 的地方。

SVG 最佳化器

SVGO 驅動的清理：檔案更小，畫面照舊。省了多少一眼可見。

SVG 轉 React

貼上 SVG，得到可直接 import 的 JSX 或 TSX 元件。