SVG 最佳化工具
已淨化最佳化和清理 SVG 檔案。
- 圖示工作流程
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
什麼是 SVG？
SVG（可縮放向量圖形）是一種以 XML 為基礎的向量圖形格式，適用於二維圖形，並支援互動性與動畫效果。與 JPEG 或 PNG 等點陣格式不同，SVG 由數學路徑定義，這表示它們可以縮放至任意大小而不損失品質。這使其非常適合用於網頁上的標誌、圖示與插圖，從行動裝置螢幕到高解析度桌上型顯示器都能保持清晰銳利。
如何使用此工具
將您的 SVG 程式碼貼到左側的「SVG 輸入」文字區域。點選「預覽」以查看圖形並擷取其色彩調色盤。使用「優化」或「壓縮」按鈕清理標記內容並縮小檔案大小。您也可以在「顏色」面板中輸入新值以取代特定顏色，並點選「套用」。點選「複製」或「下載」以儲存淨化並優化後的 SVG。
常見使用情境
圖示管理，清理從 Figma 或 Illustrator 等設計工具匯出的 SVG。主題化，快速變更圖示集的顏色以符合您的品牌調色盤。安全性，淨化來自不受信任來源的 SVG，移除潛在的指令碼或外部參照。效能優化，壓縮 SVG 標記以縮小內嵌圖形的大小，提升頁面載入速度。
專業提示
使用 currentColor 按鈕，將所有明確指定的填色與筆畫轉換為 currentColor，讓您的 SVG 能輕鬆透過 CSS 設定樣式。在正式環境使用 SVG 前，請務必先進行優化，確保檔案盡可能精簡。在設計工具中建立 SVG 時，請在優化前使用「外框筆畫」與「簡化路徑」功能，以降低產生程式碼的複雜度。