如何線上編輯 SVG 檔案（免安裝軟體）

SVG 本質上是一段標記碼，所以要改它並不需要裝 Illustrator、Inkscape 或 Figma。現代瀏覽器都能解析和渲染 SVG，只要有一個瀏覽器端的編輯器，就可以完成開啟、調整、匯出這三個動作，檔案也不會離開你的電腦。

為什麼要在瀏覽器裡改 SVG？

SVG 體積小、可以無損縮放，要嵌進 HTML 和 CSS 都很乾淨。但大多數圖示庫和匯出結果在上線前都需要做幾件小事：

• 去掉 Figma 與 Illustrator 留下的 metadata 和多餘內容。
• 調整描邊與填色以符合品牌。
• 調整畫布大小而不扭曲圖形。
• 在仍不支援 SVG 的場景下，把 SVG 匯出為 PNG。

這些都只是細節調整，根本用不到桌面編輯器。

步驟 1 —— 開啟檔案

把 SVG 拖到編輯器裡，或者從剪貼簿貼上，也可以按 開啟檔案。編輯器會在本地解析這段原始碼，你的檔案不會上傳到任何伺服器。

步驟 2 —— 進行編輯

點選圖形即可選取，然後在屬性面板裡修改填色、描邊、寬高或位置。歷史記錄經由命令匯流排統一管理，所有操作都能自由復原與重做。

步驟 3 —— 匯出前先最佳化

完成後，把檔案丟進 SVG 最佳化器。它會移除註解、metadata 和冗贅的路徑資料，同時保持畫面效果不變。一般匯出通常可以縮減 20–60%。

步驟 4 —— 匯出

把結果存成 SVG、PNG 或 JPG。如果你在做 React 或 Vue 專案，SVG 轉 JSX 和 SVG 轉 Vue 工具可以直接把檔案變成一個元件，連 className 與 style 都已經接好。

開啟、編輯、最佳化、匯出——就這四步，不用註冊、不用上傳、也不用裝任何軟體。