Tools 4 All
首頁
影像工具

線上 SVG 編輯器

在瀏覽器中執行的快速專業向量編輯器：用鋼筆繪圖、編輯錨點、組合形狀、以漸層設定樣式、製作動畫，然後匯出最佳化的 SVG 或 PNG。不會上傳任何內容。

免費免註冊在本機執行，檔案絕不會離開您的裝置

快速入門與快速鍵

在左側選擇工具（或按下其按鍵），在畫布上拖曳以繪圖，並使用右側的「設計」面板設定選取範圍的樣式。隨時按 ? 即可查看完整的快速鍵清單。

  • 導覽：捲動以平移，Ctrl/⌘ + 捲動或雙指縮放以縮放顯示，按住 Space 並拖曳以平移。Shift+1 可縮放至符合畫面。
  • 選取：按一下、Shift+按一下或拖曳出選取框。按兩下群組可進入群組，按兩下路徑可編輯其錨點，按兩下文字可輸入文字。
  • 變形：拖曳控制點以縮放（Shift 保持比例，Alt 從中心縮放），拖曳圓形旋鈕以旋轉，Ctrl/⌘+拖曳側邊控制點以傾斜。
  • 鋼筆：按一下建立尖角，拖曳建立曲線，按一下第一個錨點以封閉路徑，按 Enter 結束。
  • 檔案：將 SVG 或影像拖放到編輯器的任何位置、貼上 SVG 程式碼或螢幕擷圖，自動儲存會保留您的作品。
Untitled
Guide, features and FAQ

如何使用 SVG 編輯器

  1. 開啟或開始繪圖

    將 SVG、PNG 或 JPEG 拖放到畫布上、開啟檔案，或從空白頁面開始。不會上傳任何內容：編輯器完全在您的瀏覽器中執行。

  2. 繪製與編輯

    使用鋼筆、鉛筆與形狀工具，然後逐一調整路徑錨點，以布林運算組合形狀，並設定填色、筆畫與漸層的樣式。

  3. 整理

    在圖層面板中將物件群組、重新排序與鎖定，對齊並均分物件，將圖稿重複使用為符號，並直接編輯 SVG 程式碼。

  4. 匯出

    以任意比例下載最佳化的 SVG、PNG、JPEG 或 WebP，或將結果複製為 SVG 程式碼、資料 URI、React 元件，或從 CSS 取得色彩的 Tailwind 專用 SVG。

完全在瀏覽器中執行的專業 SVG 編輯器

Tools 4 All 的 SVG 編輯器是一套完整的向量圖形應用程式，無須下載、帳戶或上傳即可立即開啟。用它來繪製標誌、圖示、插圖、圖表與 UI 素材，或清理並微調您現有的 SVG 檔案。它以 SVG 格式本身為核心打造，因此您匯出的檔案就是您編輯的同一份文件：沒有專有格式，也沒有隱藏的轉換。

您可以做什麼

  • 精確繪圖：具 Bézier 曲線的鋼筆工具、可平滑化的手繪鉛筆、可分別設定圓角／倒角／內凹角的矩形、橢圓、線條、點滴筆刷、橡皮擦、美工刀與剪刀，以及可編輯的形狀：多邊形、星形、三角形、十字、框架、圓環、扇形、新月、箭頭、對話框、齒輪、愛心、雲朵、花朵與螺旋，還有文字。
  • 逐一編輯路徑錨點：移動錨點與控制點、在尖角／平滑／對稱錨點之間轉換、新增與刪除錨點、連接與中斷路徑、直接彎曲線段，並讓控制點靠齊切線。
  • 組合形狀：聯集、減去、交集、排除與分割，以及外框筆畫、位移路徑、簡化與反轉，全部由我們自有的保留曲線幾何引擎在背景 Worker 中計算。
  • 為一切設定樣式：純色、可在畫布上調整控制點的線性與放射狀漸層、圖樣、填色與筆畫各自的不透明度、虛線、端點、轉角、箭頭標記、混合模式、模糊與陰影效果、剪裁路徑與遮色片。
  • 保持井然有序：圖層面板支援拖曳重新排序、重新命名與巢狀結構，可鎖定與隱藏、建立與解散群組、相對於選取範圍／工作區域／關鍵物件對齊與均分，並提供文件色票與可重複使用的符號。
  • 像專業人士一樣工作：附距離標籤與等距提示的智慧型參考線、靠齊格點／像素／尺標參考線／錨點與路徑、X/Y/W/H/旋轉數值欄位、無限次復原，以及 Figma 與 Illustrator 風格的快速鍵。
  • 程式碼與匯出：雙向的 SVG 程式碼檢視、附大小顯示的最佳化 SVG 匯出、任意比例的 PNG/JPEG/WebP，並可複製為 SVG、資料 URI、React（JSX 或 TSX）、Tailwind SVG 或 CSS 背景。
  • 為網頁製作而生：文件色彩可一鍵取代或轉換為 currentColor，文字轉外框、外框筆畫、展平變形並解散群組、讓畫布符合內容，以及簡化雜亂的路徑。
  • 真正的工作空間：以分頁開啟多份繪圖，每份都有自己的復原記錄；簡短的選單搭配子選單；可收合的側邊面板（Ctrl/⌘+B）；在手機與桌上型電腦上都能全螢幕編輯。

為什麼原生 SVG 編輯器很重要

許多設計工具將 SVG 視為匯出格式：您在它們自己的模型中繪圖，最後才產生 SVG。這對簡單的圖示來說行得通，但當您需要編輯現有檔案、保留 CSS 或 JavaScript 所依賴的 id，或想了解為什麼檔案比應有的大十倍時，就行不通了。這個編輯器直接處理 SVG 文件本身。群組仍是群組，漸層仍是漸層，使用五次的 <symbol> 依然只是一個符號。當您重新命名圖層時，設定的就是該元素的 id。

處理大型檔案也很快速

從第一行程式碼開始，速度就是設計目標。繪圖由您的瀏覽器在隔離的圖層中原生轉譯。選取控制點、游標停留外框與參考線都繪製在獨立的覆蓋層上，因此移動滑鼠永遠不會影響您的文件。空間索引（R-tree）能在微秒內找出指標下方的物件，即使有數萬個形狀也一樣。在大型文件中，平移與縮放顯示會交給 GPU 合成器處理，停止時再將向量重新清晰轉譯。布林運算、路徑位移與 SVG 最佳化等耗費資源的工作在 Web Worker 中執行，讓介面保持靈敏。

向量作業的精確工具

使用鋼筆工具按一下建立尖角，拖曳建立平滑曲線。按住 Shift 可保持 45° 角，按住 Alt 可斷開控制點。使用錨點工具時，可以拖曳線段使其彎曲、按兩下新增錨點，或選取多個錨點加以對齊。智慧型參考線會在物件與相鄰物件的邊緣或中心對齊、以及物件之間間距相等時顯示提示。您也可以從尺標拖出參考線。若要輸入精確數值，請在「設計」面板中輸入 X、Y、寬度、高度與旋轉角度。欄位接受 120+16 或 200/3 之類的算式。

乾淨、精簡的匯出

編輯器在儲存檔案時常會留下中繼資料、未使用的定義、多餘的群組與過度精確的數字。匯出對話方塊會在背景執行 SVGO 風格的最佳化工具：將數字四捨五入到您選擇的精確度、將路徑資料轉換為最短形式、移除編輯器中繼資料與未使用的定義、縮短 id 與色彩，並合併無用的群組。每項最佳化都可以關閉，對話方塊也會顯示前後的檔案大小。點陣輸出方面，可選擇 1×、2×、4× 或精確像素尺寸的 PNG、JPEG 或 WebP，可選擇是否使用透明背景。

為網頁製作而生

用於網站與應用程式的 SVG 和印刷圖稿的需求不同。「文件色彩」清單會顯示檔案使用的每種色彩：變更其中一種，所有共用該色彩的部分都會跟著改變，或將它轉換為 currentColor，讓 React 或 Tailwind 圖示從 CSS 取得色彩。匯入的檔案常帶有巢狀群組與變形，使路徑難以編輯：「展平變形並解散群組」一步就能將它們寫入座標，「符合內容」則會將 viewBox 修剪到圖稿（包含筆畫）。「文字轉外框」與「外框筆畫」會將文字與線條粗細轉換為在任何地方看起來都一樣的一般路徑，「簡化」則能去除描圖或手繪形狀中成百上千的點。

您的檔案留在您的裝置上

編輯器背後沒有伺服器。開啟檔案時是從您的磁碟讀入頁面，匯出時則在您的裝置上產生檔案。自動儲存會寫入瀏覽器私有的 IndexedDB 儲存空間，其中也保存了您最近使用的檔案清單。如果不小心關閉了分頁，下次造訪時會還原您上次的文件。

探索更多影像工具

常見問題

這個 SVG 編輯器真的免費又私密嗎？
是的。它完全免費、不需要帳戶，而且 100% 在您的瀏覽器中執行。您的繪圖絕不會上傳：檔案在本機讀取，自動儲存寫入瀏覽器自己的儲存空間（IndexedDB），匯出也在您的裝置上產生。
可以開啟來自 Illustrator、Inkscape、Figma 或圖示庫的 SVG 檔案嗎？
可以。編輯器直接處理 SVG 文件，因此實際使用的檔案能保留其結構、id、樣式、漸層、符號、剪裁路徑與遮色片。雜亂或無效的檔案會在開啟時修復，編輯期間會停用指令碼，.svgz 檔案也會自動解壓縮。
它有像 Illustrator 一樣的鋼筆工具與布林運算嗎？
有。鋼筆工具可繪製具尖角、平滑與對稱錨點的 Bézier 路徑，錨點工具則讓您新增、刪除、轉換、連接、中斷與對齊錨點。聯集、減去、交集、排除與分割都作用於曲線並保持為曲線，您也可以將筆畫轉為外框、位移與簡化路徑。
可以製作 SVG 動畫嗎？
可以。開啟「動畫」工作區，移動播放指標並變更物件的位置、旋轉、縮放、不透明度或色彩：每次變更都會成為一個附有緩動曲線的關鍵影格，已有動畫的屬性也會自動新增關鍵影格。動畫會以標準 SVG（SMIL）儲存，因此在每個瀏覽器中都能播放，不需要任何指令碼。
可以直接編輯 SVG 程式碼嗎？
可以。「程式碼」面板會以語法醒目提示顯示即時的 SVG 原始碼。編輯程式碼會更新繪圖，編輯繪圖也會更新程式碼。無論從哪一側進行的變更都可以復原。
支援哪些匯出格式？
由內建 SVGO 風格最佳化工具產生、並顯示前後大小的最佳化 SVG，以及 1×、2×、4× 或自訂尺寸的 PNG、JPEG 與 WebP，可選擇透明背景。您也可以將選取範圍複製為 SVG 程式碼、資料 URI 或 React 用的 JSX。
如果瀏覽器關閉，我的作品會遺失嗎？
不會。每次變更後片刻，您的文件就會自動儲存到瀏覽器的本機儲存空間。下次開啟編輯器時，會還原您上次的工作階段，較舊的文件則可在「檔案 → 最近使用的檔案」中找到。
可以讓圖示使用 currentColor，以便用於 React 或 Tailwind 嗎？
可以。「文件色彩」區段會列出繪圖中的每種色彩（同一色彩的每種寫法只算一次）。按一下色票即可選取所有使用該色彩的物件並一次全部變更，或選擇「轉換為 currentColor」：圖示會從 CSS（例如 Tailwind 的 text-… 類別）取得色彩，同時在編輯器中保持原本的外觀。從「編輯」選單或快顯功能表即可將其複製為 React 元件或 Tailwind SVG。
如何將文字轉換為路徑，或將筆畫轉換為填色形狀？
選取文字並選擇「文字轉外框」（Ctrl/⌘+Shift+O）：每個字符都會在瀏覽器繪製的位置精確地變成路徑，包括路徑文字與已設定樣式的文字片段。至於筆畫，「外框筆畫」會將筆畫轉換為符合其寬度、端點、轉角與虛線的填色形狀，讓標誌在任何大小下都保持相同的粗細。
可以清理含有變形與巢狀群組的匯入 SVG 嗎？
可以。「展平變形並解散群組」會在一個復原步驟中將所有變形寫入路徑座標並解散群組，只保留若移除會改變外觀的群組（被剪裁、套用遮色片或被參照的群組）。「符合內容」會將畫布（viewBox、寬度與高度）修剪到圖稿（包含筆畫），可選擇加上邊距，「簡化」則能減少雜亂路徑上的點數。
可以同時處理多份繪圖嗎？
可以。每份繪圖都會在畫布上方的獨立分頁中開啟，各自擁有復原記錄、選取範圍與縮放顯示。您可以自由切換；關閉分頁時檔案會保留在「檔案 → 最近使用的檔案」中，下次造訪時開啟的分頁也會回來。
所有指令都在哪裡？選單很短。
相關指令位於子選單中（排列、變形、路徑、剪裁與遮色片、複製為、對齊與均分…）。將游標停留或點一下即可開啟，也可以使用方向鍵。每個指令都有快速鍵：按 ? 即可查看完整清單。在桌上型電腦上，可以用 Ctrl/⌘+B 收合側邊面板，讓畫布有更多空間。
可以在手機與平板電腦上使用嗎？
可以。在小螢幕上，工具會移到底部的工具列，面板則以底部面板方式開啟。雙指縮放以縮放顯示，雙指拖曳以平移，長按可開啟快顯功能表。
我的繪圖可以多大？
這個編輯器專為大型檔案打造。它使用空間索引進行點擊測試與選取，以獨立的覆蓋層處理控制點與參考線，在大型文件上僅由合成器處理平移與縮放顯示，並以 Web Worker 處理幾何運算與最佳化。包含數萬個元素的文件依然保持靈敏。
所有影像工具 →
影像壓縮工具 縮小影像檔案大小，同時保持視覺品質。 影像轉換工具 在 PNG、JPEG、WebP、GIF、BMP、ICO、TIFF 等格式之間轉換影像。 影像尺寸調整工具 將影像調整為精確尺寸，非常適合證件照。 影像轉 PDF 將一或多張影像合併成單一 PDF 文件。