跳至內容

SVG 最佳化工具

最佳化 SVG，清理中繼資料與指令碼，縮小檔案並轉換為 React JSX。

SVG 輸入

將 SVG 檔案拖放到此處

選項
輸出
Input: 0 bytes
Output: 0 bytes
SVG 背景 CSS
預覽

JSX 輸出沒有可用的預覽

為什麼使用線上 SVG 優化器？

可擴展向量圖形 (SVG) 對於現代網頁設計至關重要，可以在任何解析度下提供清晰的視覺效果。然而，從 Illustrator、Figma 或 Sketch 等工具匯出的原始 SVG 檔案通常包含不必要的元資料、註釋和隱藏屬性，從而導致檔案大小膨脹。我們的 SVG Pro 工具可協助您 清理、縮小和優化 SVG 實現更快的頁面載入和更乾淨的程式碼庫。

面向開發人員的功能

  • SVG 到 JSX 的轉換： 會自動將標準 SVG 屬性（如 class、stroke-width）轉換為 React 相容的 JSX（className、strokeWidth）。非常適合 Next.js 和 React 應用程式。
  • 安全消毒： 移除 <script> 標籤和內聯事件處理程序（onclick 等）等惡意程式碼，以防止使用使用者上傳的 SVG 時發生 XSS 攻擊。
  • CSS 背景產生器： 立即產生優化的資料 URI 片段以使用 SVG 作為 CSS 背景圖片。

優化技術

  • 刪除元資料： 刪除瀏覽器不需要的 XML 標頭、文件類型和編輯器元資料（Adobe Illustrator、Inkscape）。
  • 清潔屬性： 刪除明確預設值和無用 ID 以減少檔案大小。
  • 縮小結構： 安全地刪除註解並折疊空格。

常見問題解答

如何將 SVG 轉換為 React 元件？

只需上傳 SVG 或貼上程式碼，然後選取 “轉換為 JSX” 選項即可。該工具將使用駝峰命名法屬性，並將 class 替換為 className，為您提供一個可直接貼上的 React 元件。

這個 SVG 優化器使用安全性嗎？

是的。 SVG Pro 完全在您的瀏覽器中執行。您的檔案永遠不會上傳到任何伺服器，確保您的專有資產和資料保持私密和安全。

為什麼我的 SVG 檔這麼大？

SVG 檔案通常包含設計軟體留下的“垃圾”，例如隱藏層、特定於編輯器的元資料以及路徑資料中過高的精度。驗證和縮小 SVG 通常可以將檔案大小減少 30-70%，而不會造成視覺損失。