什麼是SVG編輯器？

在視覺化畫布上繪製形狀、路徑和文字，調整筆畫與填充顏色，匯出SVG程式碼。無需安裝桌面軟體。

工具包含矩形、橢圓、直線、徒手路徑、文字,以及形狀庫(三角形、六邊形、星形、箭頭)。文字直接在畫布上編輯 —— 選擇文字工具即可輸入,雙擊既有文字也能重新改寫。每個元素都有獨立的填色、描邊顏色、描邊寬度和透明度,可在屬性面板輸入精準的 X、Y、寬與高。一鍵匯入既有 SVG,可在 10 像素網格上對齊繪圖,並提供最多 50 步的復原與重做。完成的圖形可匯出為純 SVG 原始碼,供 HTML 與 React JSX 使用,或匯出為點陣 PNG,給不接受 SVG 的場合使用。

使用方法

1. 選擇繪圖工具（矩形、橢圓、直線、路徑或文字），在畫布上繪製圖形。
2. 選取元素後可進行移動、縮放、旋轉，或修改填充色、筆畫和透明度。
3. 將完成的圖形匯出為SVG檔案，或直接複製SVG原始碼。

何時使用

• 為登陸頁面快速畫一個一次性的 logo、分隔線或主視覺圖形。
• 不想開啟笨重的桌面軟體時,手動微調既有的 SVG。
• 教 SVG 基礎時,邊畫邊看程式碼同步變化。

結果

一位前端開發者需要一個簡單的Logo標誌——兩個帶漸層填充的重疊圓形。在畫布上畫出形狀、套用顏色後，直接複製SVG程式碼貼到HTML中。

常見問題

複製出來的 SVG 能直接貼到 React JSX 嗎?

大致可以,但要注意:stroke-width、stop-color 等屬性在 JSX 中要寫成 strokeWidth、stopColor。本工具複製的是 kebab-case 原始 SVG,適合直接放進 HTML,轉成 JSX 時用一次尋找取代就好。

可以匯入已有的 SVG 繼續編輯嗎?

可以 —— 點選「匯入 SVG」即可從裝置載入任何 .svg 檔。矩形、橢圓、圓形、直線、路徑和文字會變成畫布上可編輯的元素。漸層、濾鏡與巢狀群組會略過,因為編輯器把每個形狀當成單一基本圖形儲存。

為什麼在 Illustrator 或 Figma 中打開,SVG 顯示有點不同?

不同渲染器處理描邊對齊、漸層和濾鏡的方式略有差異。本工具的輸出與所有現代瀏覽器一致,符合規範定義;差異通常是對方軟體的渲染解讀。

路徑工具支援貝茲曲線控制點嗎?

徒手路徑工具會記錄你繪製的點並以折線方式輸出。若要真正的三次貝茲曲線,匯出後手動編輯 d 屬性,或把程式碼貼到能顯示控制把手的向量工具中繼續調整。

畫布上最多能加多少元素而不卡頓?

幾百個圖形在現代裝置上都流暢。元素數量上千(例如複雜地圖或圖示陣列)就會明顯延遲,因為每次拖曳都會觸發整個畫布重繪。建議合併為較少的複合路徑。

相關工具